• js draggable 拖拽效果 数据传递


    js draggable 拖拽效果

    • drag 拖拽中
    • dragstart 开始拖拽
    • dragover 拖拽悬浮时触发
    • dragenter 拖入目标节点
    • dragleave 离开源节点
    • drop 落进目标节点
    • event.dataTransfer.setData 拖拽时传输数据,可用于dragstart中
    • event.dataTransfer.getData 拖拽时传输数据,可用于drop中

    demo

    <!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>
    </head>
    
    <style>
        #draggable {
             200px;
            height: 20px;
            text-align: center;
            background: lightcoral;
        }
    
        .dropzone {
             200px;
            height: 20px;
            background: aqua;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
    
    <body>
        <div id="wrapper">
            <div class="dropzone">
                <div id="draggable" draggable="true">
                    a draggable div
                </div>
            </div>
            <div class="dropzone"></div>
            <div class="dropzone"></div>
            <div class="dropzone"></div>
        </div>
        <script>
            var dragged;
            const wDom = document.getElementById('wrapper')
    
            // 开始拖拽,也可用drag,不过drag,dragover在拖起的时候会持续触发, dragstart只触发一次
            wDom.addEventListener('dragstart', (e) => {
                dragged = e.target
                e.target.style.opacity = 0.5
                event.dataTransfer.setData('text/plain', JSON.stringify({}))
            })
            // 拖拽悬浮
            wDom.addEventListener('dragover', (e) => {
                e.preventDefault()
            })
            // 拖拽结束,还原源节点的透明度
            wDom.addEventListener('dragend', (e) => {
                e.target.style.opacity = ""
            })
    
            // 进入目标节点,高亮目标节点
            wDom.addEventListener('dragenter', (e) => {
                if (e.target.className === 'dropzone') {
                    e.target.style.background = "red"
                }
            })
            // 离开源节点
            wDom.addEventListener('dragleave', (e) => {
                if (e.target.className === 'dropzone') {
                    e.target.style.background = ""
                }
            })
            // 放进目标节点,取消目标节点的高亮,转移dom
            wDom.addEventListener('drop', (e) => {
                if (e.target.className === 'dropzone') {
                    const data = event.dataTransfer.getData('text/plain')
                    e.target.style.background = ""
                    dragged.parentNode.removeChild(dragged)
                    e.target.appendChild(dragged)
                }
            })
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    spring源码阅读之ioc
    java基础面试题
    【0708】(OOP)编写并输出学员类和教员类
    【0706】综合作业:吃货联盟订餐系统
    【0703作业】输入一批整数,输出其中的最大值和最小值,输入0结束循环
    【0703作业】获取最低价手机价格
    【0703作业】一组成绩降序排列,插入数值
    【0703作业】猜数游戏
    【0702作业】根据数字输出行数(1-9)
    【0702作业】输出1-7对应星期
  • 原文地址:https://www.cnblogs.com/ltfxy/p/16386050.html
Copyright © 2020-2023  润新知