被拖动时触发 drag 事件到drop事件的执行步骤过程例子

最新推荐文章于 2023-01-09 14:56:37 发布

bthuntergg

最新推荐文章于 2023-01-09 14:56:37 发布

阅读量3.2k

点赞数 1

分类专栏： html 文章标签：拖动事件 addEventListener

本文链接：https://blog.csdn.net/bthuntergg/article/details/81150616

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
    <meta charset="utf-8">
    <link href="https://developer.mozilla.org/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet"
          type="text/css">
    <style type="text/css">
        #draggable {
            width: 200px;
            height: 20px;
            text-align: center;
            background: white;
        }
        .dropzone {
            width: 200px;
            height: 20px;
            background: blueviolet;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
    <title>dragstart - 示例：dropzone - code sample</title>
</head>
<body>
<div class="dropzone" style="">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)" style="background: #0a0a0a">
        This div is draggable
    </div>
</div>
<div class="dropzone" style=""></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<script>
    var dragged;
    //1   start 会触发两次
    document.addEventListener("dragstart", function (event) {
        // 保存拖动元素的引用(ref.)
         dragged = event.target;
        console.log(dragged)
        // 使其字体变红
        event.target.style.color = 'red';
    }, false);
    /* 2  可拖动的目标元素会触发事件 */
    document.addEventListener("drag", function (event) {
    }, false);


    /*  3放下目标节点时触发事件 */
    document.addEventListener("dragover", function (event) {
        event.target.style.color = 'blue';
        // 阻止默认动作
        event.preventDefault();
    }, false);
    //4  6
    document.addEventListener("dragenter", function (event) {
        // 当可拖动的元素进入可放置的目标高亮目标节点
        if (event.target.className == "dropzone") {
            event.target.style.background = "purple";
        }
    }, false);
    //5
    document.addEventListener("dragleave", function (event) {
        // 当拖动元素离开可放置目标节点，重置其背景
        if (event.target.className == "dropzone") {
            event.target.style.background = "white";
        }
    }, false);
    //7
    document.addEventListener("drop", function (event) {
        // 阻止默认动作（如打开一些元素的链接）
        event.preventDefault();
        // 移动拖动的元素到所选择的放置目标节点
        if (event.target.className == "dropzone") {
            event.target.style.background = "yellow";
            console.log(dragged.parentNode)
            dragged.parentNode.removeChild(dragged);
            //上面的dragged与下面的dragged不是同一个对象
            event.target.appendChild(dragged);
        }
    }, false);
    //3   8
    document.addEventListener("dragend", function (event) {
        // 重置透明度
        event.target.style.opacity = .1;
    }, false);
</script>
</body>
</html>

1用chrome对drag事件断点原对象字体变红色，被拖动的对象字体也变红色说明程序先执行了dragstart再执行drag