丢弃事件处理程序HTML / Dom

时间:2017-11-02 23:09:11

标签: javascript html dom html-table drag-and-drop

我在html页面上有两个表,我正在尝试向其中一个表添加一个事件监听器,并且当一个元素从一个元素拖到另一个元素时,这样就可以得到它,从而能够从中获取信息。删除的行,并将更改写入数据库......

但首先我遇到一个问题,即使检测到一个物体也被丢弃了。

我正在尝试添加" drop"事件到其中一个表,根据我的研究,如果我添加到该表的事件处理程序应该检测何时删除一个对象,我已经尝试过:

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 ");
});

但是当我从一侧拖动一行到另一侧时,它们都没有打印到控制台...我从一张桌子抓起一行并将其拖到另一张桌子上并且该行离开原始桌子并停留在原处我把它放在新的一个但没有记录到控制台?

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

在此链接中,您可以找到有关拖放的更多信息。

https://www.w3schools.com/html/html5_draganddrop.asp