拖拽Drag 和 Drop 事件

最新推荐文章于 2023-01-11 00:24:48 发布

qq_26144233

最新推荐文章于 2023-01-11 00:24:48 发布

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_26144233/article/details/110060569

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

DataTransfer 对象所有 drag 和 drop 事件的事件监听器都接收一个 Event 对象作为参数，它有一个叫做 dataTransfer 的只读属性。
event.dataTransfer 返回与事件相关的 DataTransfer 对象，DataTransfer 对象持有 drag 和 drop 操作相关的数据。可以检索这些数据以及设置 DataTransfer 对象相关联的各种属性。

步骤1：创建一个可拖拽对象

下面是要采用的步骤：
? 如果想要拖动某个元素，需要设置元素的 draggable 属性为 true。
? 给 dragstart 设置一个事件监听器存储拖拽数据。
? 事件监听器 dragstart 会设置允许的效果（copy，move，link或者是组合形式的）。
下面是一个让对象可拖拽的示例：

<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #boxA,
        #boxB {
            float: left;
            padding: 10px;
            margin: 10px;
            -moz-user-select: none;
        }

        #boxA {
            background-color: #6633FF;
            width: 75px;
            height: 75px;
        }

        #boxB {
            background-color: #FF6699;
            width: 150px;
            height: 150px;
        }
    </style>
    <script type="text/javascript">
        function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target, 0, 0);
            return true;
        }
        function dragEnter(ev) {
            event.preventDefault();
            return true;
        }
        function dragOver(ev) {
            return false;
        }
        function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
        }
    </script>
</head>

<body>
    <div>
        <h2>Drag and drop HTML5 demo</h2>
        <div>Try to move the purple box into the pink box.</div>
        <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
        </div>
        <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"
            ondragover="return dragOver(event)">Dustbin</div>
    </div>
</body>

</html>