js draggable 拖拽

2022-06-17 16:04:01 阅读：159 来源： 互联网

标签：false target 拖动 wDom 拖拽 draggable js event log

<body>
    <div id="wrapper">
        <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>
    </div>

    <style>
        #draggable {
            width: 200px;
            height: 20px;
            text-align: center;
            background: lightcoral;
        }

        .dropzone {
            width: 200px;
            height: 20px;
            background: aqua;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>

    <script>
        var dragged;
        const wDom = document.getElementById('wrapper')
        // drag，dragover在拖起的时候会持续触发
        /* 拖动目标元素时触发 drag 事件 */
        wDom.addEventListener("drag", function (event) {
            // console.log('触发拖动');
        }, false);

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

        wDom.addEventListener("dragend", function (event) {
            console.log('结束拖动');
            // 重置透明度
            event.target.style.opacity = "";
        }, false);

        /* 放置目标元素时触发事件 */
        wDom.addEventListener("dragover", function (event) {
            // console.log('悬浮拖动');
            // 阻止默认动作以启用 drop
            event.preventDefault();
        }, false);

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

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

        }, false);

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

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

标签：false,target,拖动,wDom,拖拽,draggable,js,event,log
来源： https://www.cnblogs.com/ltfxy/p/16386050.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js draggable 拖拽