要访问被放入可排序的draggable元素的id,您可以使用JavaScript和HTML5的拖放API。以下是一个简单的示例,说明如何实现这一点:
<ul id="sortableList">
<li draggable="true" id="item1">Item 1</li>
<li draggable="true" id="item2">Item 2</li>
<li draggable="true" id="item3">Item 3</li>
</ul>
const sortableList = document.getElementById("sortableList");
sortableList.addEventListener("dragstart", (event) => {
const target = event.target;
event.dataTransfer.setData("text/plain", target.id);
});
sortableList.addEventListener("dragover", (event) => {
event.preventDefault();
});
sortableList.addEventListener("drop", (event) => {
event.preventDefault();
const target = event.target;
const id = event.dataTransfer.getData("text/plain");
const draggedItem = document.getElementById(id);
if (target !== draggedItem) {
target.parentNode.insertBefore(draggedItem, target);
}
});
在这个示例中,我们首先获取包含可排序元素的列表,并为其添加三个事件监听器:
dragstart
:当拖动开始时,将元素的id存储在event.dataTransfer
对象中。dragover
:在拖动过程中,防止默认行为(例如,防止浏览器打开拖动的链接)。drop
:当元素被放置在新位置时,获取存储在event.dataTransfer
对象中的id,并根据需要重新排序列表。这样,您就可以在拖放操作期间访问被排序元素的id,并根据需要对其进行操作。
领取专属 10元无门槛券
手把手带您无忧上云