js多节点拖拽是什么思路

Question

看这个示例
单个拖拽

我想实现点击选中多个,然后拖拽,请大佬帮忙看下怎么实现?

Answer 1

既然有示例了，先看懂示例的思路。

handleDrop(event) {
            event.preventDefault();
            event.target.style.border = "1px solid #cc0033";
            const data = event.dataTransfer.getData("Text");
            console.log(data)
            this.insertAfter(document.getElementById(data), event.target)
        },

重点在于handleDrop函数，该函数在drop（放下）时执行，获取drop时触及的元素，然后把拖拽元素插在后面，这是主要思路，边界情况先不考虑。

再考虑你的改进，多个拖拽相较于单个拖拽，区别就在于拖拽后的插入处理逻辑，示例是插入一个元素，你这边就要插入多个元素。

最后考虑一些子问题：
1.插入时，如何获取拖拽元素？示例通过dragstart的event获取元素ID，然后存入dataTransfer。而多个元素时无法通过一个event获取，那么就要用状态来记录选中的元素。
2.如何drop在哪个元素上？示例只有一个元素，所以怎么拖都没问题；你这里有多个元素，那么应该是允许从任意元素开始拖拽的，相应地，计算插入位置也要基于同一个元素