JS实现拖拽效果注意点_组织机构 js拖拽-优快云博客

最近工作中要去实现组织架构的拖拽行为，然后被一个点给坑了乘着周末有时间记录一下避免再次采坑

简单效果图示：

在这里插入图片描述

步骤：

其实就是监听几个事件，主要是坑在最好一步放入的时候需要阻止拖拽结束的默认事件

拖拽开始 dragstart
拖拽中 drag
拖拽结束 dragover
拖拽离开 dragleave
拖拽进入 drageenter
监听放入 drop 需要阻止默认事件并且阻止拖拽结束的默认事件

简单代码：

<body>
<div class="box">
    <div class="content" id="info" draggable="true">
        这里是内容
    </div>
</div>
<div class="box"></div>
<div class="box"></div>
<script>
// 声明拖拽元素变量
    let dragDom;
// 监听拖拽开始
document.addEventListener('dragstart', function (e) {
    if (e.target.className === 'content') {
        // 拖拽开始可以传入信息,键值对形式
        e.dataTransfer.setData('test', e.target.id);
        dragDom = e.target;
    }
}, false)

// 监听拖拽进入变化颜色
document.addEventListener('dragenter', function (e) {
    let tar = e.target;
    if (tar.className === 'box') {
        tar.style.backgroundColor = 'skyBlue'
    }
}, false)

// 监听离开恢复颜色
document.addEventListener('dragleave', function (e) {
    let tar = e.target;
    if (tar.className === 'box') {
        tar.style.backgroundColor = '';
    }
})

// 结束放入需要阻止dragover里面的默认行为,不然drop无法监听到
document.addEventListener('dragover', function (e) {
    e.preventDefault();
})
// 放入区块
document.addEventListener('drop', function (e) {
    e.preventDefault();
    let tar = e.target;
    // 输出拖拽自定义的信息
    console.log(e.dataTransfer.getData('test'))
    console.log(e.dataTransfer.types)
    // 清除自定义拖拽信息
    e.dataTransfer.clearData();
    console.log(e.dataTransfer.getData('test'))
    if (tar.className = 'box') {
        tar.appendChild(dragDom); // appendChild 有剪切功能
        tar.style.backgroundColor = '';
    }
}, false)

希望对大家有所帮助哈