Dragula：原生JavaScript中获取被拖拽元素及目标容器信息的实现咨询

嘿，我来帮你搞定这个问题～你的代码里有几个小问题导致它没法正常工作，我一步步给你拆解并修正：

你的代码存在的问题 #

• 没有绑定到Dragula实例：Dragula初始化后会返回一个实例对象，所有的事件监听都必须通过这个实例来调用on方法，而不是直接全局调用on
• 错误的日志输出：你写的console.log("el")只是输出了字符串"el"，而不是实际的被拖拽元素对象
• 语法错误：代码末尾多了个多余的点，而且函数的闭合也有小问题

修正后的完整代码 #

首先要确保你已经在页面中引入了Dragula的脚本和样式文件（如果还没加的话），然后用下面的代码替换你的原有脚本：

<!-- 先引入Dragula的样式和脚本 -->
<link rel="stylesheet" href="dragula.min.css">
<script src="dragula.min.js"></script>

<script>
// 初始化Dragula并获取实例
const drake = dragula([
  document.getElementById("to-do"),
  document.getElementById("inprogress"),
  document.getElementById("done")
]);

// 绑定drop事件，获取拖拽相关信息
drake.on("drop", function(el, target, source, sibling) {
  // 输出被拖拽的元素对象
  console.log("被拖拽的元素:", el);
  // 输出目标容器对象（元素被拖入的容器）
  console.log("目标容器:", target);
  // 可选：输出元素原本所在的容器
  console.log("原始容器:", source);
  // 可选：输出元素插入位置的相邻兄弟元素
  console.log("插入位置的兄弟元素:", sibling);
});
</script>

更友好的日志输出（可选） #

如果想输出更直观的信息（比如元素ID、容器名称），可以改成这样：

drake.on("drop", function(el, target, source) {
  console.log(`被拖拽元素：ID=${el.id}，内容=${el.textContent.trim()}`);
  console.log(`目标容器：ID=${target.id}，当前包含${target.children.length}个元素`);
  console.log(`原始容器：ID=${source.id}`);
});

这样你就能在控制台清晰看到每次拖拽的元素和容器的详细信息啦～

内容的提问来源于stack exchange，提问作者Ant