首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何访问被放入可排序的draggable元素的id

要访问被放入可排序的draggable元素的id,您可以使用JavaScript和HTML5的拖放API。以下是一个简单的示例,说明如何实现这一点:

  1. 首先,在HTML中创建一个可排序的列表:
代码语言:html
复制
<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>
  1. 接下来,使用JavaScript监听拖动事件并获取元素的id:
代码语言:javascript
复制
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,并根据需要对其进行操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券