拖拽会用到哪些事件

时间:2020-05-01

dragstart

当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。

drag

当元素或者选择的文本被拖动时触发 drag 事件 (每几百毫秒)。

dragenter

当拖动的元素或被选择的文本进入有效的放置目标时, dragenter 事件被触发。

dragexit

当一个元素不再是拖动操作的直接选择目标时,将会触发dragexit 事件。

dragleave

当一个被拖动的元素或者被选择的文本离开一个有效的拖放目标时,将会触发dragleave 事件。

dragover

当元素或者选择的文本被拖拽到一个有效的放置目标上时,触发 dragover 事件(每几百毫秒触发一次)。

这个事件在可被放置元素的节点上触发。

drop

当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时,drop 事件被抛出。

dragend

拖放事件在拖放操作结束时触发(通过释放鼠标按钮或单击escape键)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #draggable {
            width: 200px;
            height: 20px;
            text-align: center;
            background: white;
        }

        .dropzone {
            width: 200px;
            height: 20px;
            background: blueviolet;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="dropzone">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable
    </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<script>
    var dragged;

    /* 可拖动的目标元素会触发事件 */
    document.addEventListener("drag", function (event) {

    }, false);

    document.addEventListener("dragstart", function (event) {
        // 保存拖动元素的引用(ref.)
        dragged = event.target;
        // 使其半透明
        event.target.style.opacity = .5;
    }, false);

    document.addEventListener("dragend", function (event) {
        // 重置透明度
        event.target.style.opacity = "";
    }, false);

    /* 放下目标节点时触发事件 */
    document.addEventListener("dragover", function (event) {
        // 阻止默认动作
        event.preventDefault();
    }, false);

    document.addEventListener("dragenter", function (event) {
        // 当可拖动的元素进入可放置的目标高亮目标节点
        if (event.target.className === "dropzone") {
            event.target.style.background = "purple";
        }

    }, false);

    document.addEventListener("dragleave", function (event) {
        // 当拖动元素离开可放置目标节点,重置其背景
        if (event.target.className === "dropzone") {
            event.target.style.background = "";
        }

    }, false);

    document.addEventListener("drop", function (event) {
        // 阻止默认动作(如打开一些元素的链接)
        event.preventDefault();
        // 移动拖动的元素到所选择的放置目标节点
        if (event.target.className === "dropzone") {
            event.target.style.background = "";
            dragged.parentNode.removeChild(dragged);
            event.target.appendChild(dragged);
        }

    }, false);
</script>
</body>
</html>