使用draggable拖拽完多个元素后,再次拖拽这些元素,移动的都是最后一次拖拽的元素
时间: 2024-04-09 08:34:15 浏览: 8
如果拖拽完多个元素后再次拖拽时移动的都是最后一次拖拽的元素,可能是因为在处理拖拽事件时,没有正确更新每个元素的状态。
当你拖拽一个元素时,需要将该元素的引用存储在一个变量中,以便在后续的事件中使用。在`dragstart`事件中,你可以使用`event.dataTransfer.setData()`方法来存储被拖拽元素的唯一标识。然后,在`drop`事件中,你可以使用`event.dataTransfer.getData()`方法来获取被拖拽元素的唯一标识,并据此找到对应的元素,并进行位置更新。
以下是一个示例代码,用于实现多个元素的拖拽并正确更新元素位置:
```javascript
let draggedElement; // 保存当前被拖拽的元素
function handleDragStart(event) {
draggedElement = event.target;
event.dataTransfer.setData('text/plain', event.target.id); // 存储被拖拽元素的唯一标识
}
function handleDragOver(event) {
event.preventDefault();
}
function handleDrop(event) {
event.preventDefault();
const droppedElementId = event.dataTransfer.getData('text/plain'); // 获取被拖拽元素的唯一标识
const droppedElement = document.getElementById(droppedElementId); // 根据唯一标识找到对应的元素
event.target.parentNode.insertBefore(droppedElement, event.target.nextSibling);
draggedElement = null; // 清空被拖拽元素的引用
}
const draggableElements = document.querySelectorAll('[draggable="true"]');
draggableElements.forEach(element => {
element.addEventListener('dragstart', handleDragStart);
element.addEventListener('dragover', handleDragOver);
element.addEventListener('drop', handleDrop);
});
```
请确保每个拖拽元素都有一个唯一的`id`属性,以便在`handleDrop`函数中正确找到对应的元素。如果元素没有`id`属性,你可以根据实际情况使用其他的唯一标识符。
通过在`dragstart`事件中存储被拖拽元素的唯一标识,并在`drop`事件中根据唯一标识找到对应的元素,可以确保拖拽多个元素后再次拖拽时移动的是正确的元素。希望这对你有所帮助!