HTML5 drag & drop 拖拽与拖放
程序员文章站
2022-06-25 08:15:03
关键词： 1. draggable：规定元素是否可拖动的，draggable=true可拖动 2. dataTransfer：拖拽对象用来传递的媒介，使用方式：event.dataTransfer 3. ondragstart：拖拽元素被拖拽时触发的事件，作用于被拖拽元素 4. ondragente ......
关键词：
1. draggable：规定元素是否可拖动的，draggable=true可拖动
2. datatransfer：拖拽对象用来传递的媒介，使用方式：event.datatransfer
3. ondragstart：拖拽元素被拖拽时触发的事件，作用于被拖拽元素
4. ondragenter：拖拽元素进入目标元素时触发的事件，作用于目标元素
5. ondragover：拖拽元素在目标元素移动触发的事件，作用于目标元素
6. ondrop：拖拽的元素在目标元素上同时鼠标放开触发的事件，作用于目标元素上
7. ondragend：拖拽完成后触发的事件，作用于被拖拽元素上
实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style type="text/css">
#rectangle {width:350px;height:70px;padding:10px;border:1px solid #000;}
</style>
</head>
<body>
<div id="rectangle"></div>
<p id="word" draggable="true">这是一段可移动的段落，请把该段落拖入上面的矩形进行测试</p>
<script type="text/javascript">
let rectangle = document.getelementbyid('rectangle'),
word = document.getelementbyid('word');
word.ondragstart = (e) => {
e.datatransfer.setdata("text",e.target.id);
};
rectangle.ondragenter = (e) => {
word.style.color = '#e1453c';
};
//ev.preventdefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventdefault()，否则ondrop事件不会被触发。
另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
此时需要用用document的ondragover事件把它直接干掉。
rectangle.ondragover = (e) => {
e.preventdefault();
};
rectangle.ondrop = (e) => {
let data=e.datatransfer.getdata("text");
e.target.appendchild(document.getelementbyid(data));
e.preventdefault();
};
word.ondragend = (e) => {
document.getelementbyid('word').style.color = '#3cf078';
};
</script>
</body>
</html>
上一篇： ios11苹果手机怎么投屏到电脑
下一篇： MySQL自定义函数简单用法示例