拖拉拽例子
【摘要】 例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖拉拽</title>
<style type="text/css"> #div1 {width:350px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script> fun...
例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>拖拉拽</title>
<style type="text/css"> #div1 {width:350px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script> function allowDrop(ev) { console.log("ondragover",ev) ev.preventDefault(); } function drag(ev,str) { console.log("start drag",str,ev) ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { console.log("drop",ev) ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
</script>
</head>
<body>
<p>拖动 灰色div 到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div style="width: 200px; height: 200px; background-color: #aaaaaa;" draggable="true" ondragstart="drag(event,'123')" id="div2"></div>
</body>
</html>
相关知识
- draggable="true"， 配置属性可以拖拉拽
- 在拖动目标上触发事件
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
文章来源: www.jianshu.com，作者：Nick_4438，版权归原作者所有，如需转载，请联系作者。
原文链接：www.jianshu.com/p/5b8122b4ed40
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）