欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>