HTML5 drag & drop 拖拽与拖放

最新推荐文章于 2022-10-17 21:15:31 发布

weixin_34072857

最新推荐文章于 2022-10-17 21:15:31 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tracy-ling/p/10155595.html

本文详细介绍HTML5拖拽API的使用方法，包括draggable属性、dataTransfer对象、ondragstart、ondragenter、ondragover、ondrop及ondragend事件。通过一个示例，演示如何将文本从一个元素拖拽到另一个元素，并实现拖拽过程中的视觉反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键词：

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>