javascript - 在使用 drop 事件处理程序 HTML/Dom 时遇到问题

Question

我在一个 html 页面上有两个表，我正在尝试向其中一个添加一个事件监听器，并使其在将元素从一个元素拖到另一个元素时能够从中获取信息删除的行，并将更改写入数据库...

但首先我遇到了一个问题，即使检测到一个对象被丢弃。

我正在尝试向其中一个表添加“丢弃”事件，根据我的研究，如果我添加到该表的事件处理程序应该检测对象何时被丢弃，我已经尝试过:

var table = document.getElementById('table');
table.addEventListener("drop", function(event) {
      console.log("dropped ");
});

和

var table = document.getElementById('table');
table.addEventListener("ondrop", function(event) {
      console.log("dropped ");
});

但是当我将一行从一侧拖到另一侧时，它们都没有打印到控制台...我从一个表中抓取一行并将其拖到另一个表中，该行离开原始表并留在原处我将它放入新的，但没有任何内容记录到控制台？

如果有人愿意为我指出正确的方向来做这件事，我将不胜感激!

Answer 1

要确保每个表都是有效的“拖放区”，它必须具有 ondragover 和 ondrop 事件的事件处理程序。

最简单的方法是直接在表格元素上定义这样的东西:

<table ondrop="drop_handler(event);" ondragover="dragover_handler(event);">

还要确保行应用了draggable 属性。