html5的drag和drop的用法示例（代码）

5分钟弄清楚html5的drag and drop，及其他监听事件和执行的次序。

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        meta name="viewport" content="width=device-width, inITial-scale=1.0">
        meta http-equiv="X-UA-Compatible" content="ie=Edge">
        title>
    5分钟drag and drop简明示例/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>
        script>
            VAR dragged;
        document.addEventListener("dragstart", function (event) {
                console.LOG('==========dragstart 开始被拖拽==========一次拖动只执行一次');
                // 保存拖动元素的引用(ref.)            dragged = event.target;
                // 使其半透明            event.target.style.opacity = .5;
        }
    , false);
        /* 拖动目标元素时触发drag事件 */        document.addEventListener("drag", function (event) {
                // console.log('==========drag==========拖拽时会一直监听，直到放下元素');
        }
    , false);
        /* 放置目标元素时触发事件 */        document.addEventListener("dragover", function (event) {
                // console.log('==========dragover==========拖拽时会一直监听，直到放下元素');
                // 阻止默认动作以启用drop            event.preventDefault();
        }
    , false);
        document.addEventListener("dragenter", function (event) {
                console.log('==========dragenter 拖曳元素 进入目标元素==========对应着dragleave');
            // 当可拖动的元素进入可放置的目标时高亮目标节点            if (event.target.classname == "dropzone") {
                    event.target.style.background = "purple";
            }
        }
    , false);
        document.addEventListener("dragleave", function (event) {
                console.log('==========dragleave 拖曳元素 离开目标元素==========对应着dragenter');
            // 当拖动元素离开可放置目标节点，重置其背景            if (event.target.className == "dropzone") {
                    event.target.style.background = "";
            }
        }
    , false);
        document.addEventListener("drop", function (event) {
                console.log('==========drop 放下元素==========一次拖动只执行一次，在dragenter前触发');
                // 阻止默认动作（如打开一些元素的链接）            event.PReventDefault();
            // 将拖动的元素到所选择的放置目标节点中            if (event.target.className == "dropzone") {
                    event.target.style.background = "";
                    dragged.parentNode.removeChild(dragged);
                    event.target.appendChild(dragged);
            }
        }
    , false);
        document.addEventListener("dragend", function (event) {
                console.log('==========dragend 结束拖拽==========一次拖动只执行一次');
                // 重置透明度            event.target.style.opacity = "";
        }
    , false);
        /script>
    /head>
    body>
        div>
            div id="draggable" draggable="true" ondragstart="event.datatransfer.setData('text/plain',null)">
                这是可以拖拽的DIV        /div>
        /div>
        div>
    /div>
        div>
    /div>
        div>
    /div>
    /body>
    /html>
    

【相关推荐：HTML5视频教程】

以上就是html5的drag和drop的用法示例（代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！