js使用draggable拖拽多个元素后,再次拖拽,移动的永远是最后一次拖拽的是元素。怀疑是preventDefault放下后,dragstart方法不生效了,没有重新赋值,一直是拖拽的是最后一个元素。
时间: 2024-04-09 09:34:12 浏览: 12
可能是因为你没有正确处理拖拽事件的绑定和元素的状态。在使用`draggable`属性进行拖拽时,需要正确设置`dragstart`、`dragover`、`dragenter`、`dragleave`、`dragend`和`drop`等事件的处理函数。
首先,确保在每个需要拖动的元素上添加`draggable="true"`属性。
然后,在拖动开始时,将当前拖动的元素保存到一个变量中,以便在后续事件中使用。你可以在`dragstart`事件中获取当前拖动的元素,并将其保存到一个全局变量中。
接下来,在`dragover`和`drop`事件中,阻止默认行为,以避免被浏览器默认处理拖拽的行为干扰。
最后,在`drop`事件中,将拖动的元素插入到目标位置,并更新元素的状态。
以下是一个示例代码,用于实现多个元素的拖拽并正确更新元素位置:
```javascript
// 保存当前拖动的元素
let dragElement;
// dragstart事件处理函数
function handleDragStart(event) {
dragElement = event.target;
}
// dragover事件处理函数
function handleDragOver(event) {
event.preventDefault();
}
// drop事件处理函数
function handleDrop(event) {
event.preventDefault();
// 获取目标位置的元素
const dropTarget = event.target;
// 将拖动的元素插入到目标位置
dropTarget.parentNode.insertBefore(dragElement, dropTarget.nextSibling);
// 清空拖动元素
dragElement = null;
}
// 绑定事件处理函数
const draggableElements = document.querySelectorAll('[draggable="true"]');
draggableElements.forEach(element => {
element.addEventListener('dragstart', handleDragStart);
element.addEventListener('dragover', handleDragOver);
element.addEventListener('drop', handleDrop);
});
```
通过正确处理`dragstart`、`dragover`和`drop`等事件,可以确保拖拽多个元素后再次拖拽时移动的是正确的元素。希望这能帮到你!