dragstart-拖拽-HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #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 ) {
            console.log("drag",event);
        }, false);

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

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

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

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

        }, false);

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

        }, false);

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

        }, false);
    </script>
</body>
</html>
posted @ 2021-08-02 14:06  13522679763-任国强  阅读(233)  评论(0)    收藏  举报