CODEWITHSUNDEEP
javascripthtmldomhtml-tabledrag-and-drop
Chase
Chase

Reputation: 287

Having trouble with drop event handler HTML/Dom

I have two tables on an html page, and I am trying to add an event listener to one of them, and make it so when an element is dragged from one to the other, be able to get the information out of the row that was dropped, and write to database the changes...

But first I am having an issue even detecting an object is dropped.

I am trying to add a "drop" event to one of the tables which according to my research, if I add to an event handler for that table should detect when an object is dropped, I have tried:

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

and

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

but neither one of them print to the console when I drag a row from one side to the other... I am grabbing a row from one table and dragging it to the other and the row leaves the original table and stays where I dropped it in the new one but nothing is logged to the console?

If anyone is willing to point me in the right direction to do this it would be greatly appreciated!

Upvotes: 1

Views: 359

Answers (2)

Isaac Ferreira
Isaac Ferreira

Reputation: 436

In this link you can find more information about drag/drop.

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

Upvotes: 0

8bit
8bit

Reputation: 597

To make sure that each table is a valid "drop zone" it must have event handlers for both the ondragover and ondrop events.

The easiest thing would be to define something like this directly on the table elements:

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

Also make sure that the rows have the draggable attribute applied.

Upvotes: 1

Related Questions