在alde创建html,javascript - HTML5 dragleave fired when hovering a child element - Stack Overflow

I struggeled a LOT with this, even after reading through all of these answers, and thought I may share my solution with you, because I figured it may be one of the simpler approaches, somewhat different though. My thought was of simply omitting the dragleave event listener completely, and coding the dragleave behaviour with each new dragenter event fired, while making sure that dragenter events won't be fired unnecessarily.

In my example below, I have a table, where I want to be able to exchange table row contents with each other via drag & drop API. On dragenter, a CSS class shall be added to the row element into which you're currently dragging your element, to highlight it, and on dragleave, this class shall be removed.

Example:

Very basic HTML table:

Hello

There

And the dragenter event handler function, added onto each table cell (aside dragstart, dragover, drop, and dragend handlers, which are not specific to this question, so not copied here):

/*##############################################################################

## Dragenter Handler ##

##############################################################################*/

// When dragging over the text node of a table cell (the text in a table cell),

// while previously being over the table cell element, the dragleave event gets

// fired, which stops the highlighting of the currently dragged cell. To avoid

// this problem and any coding around to fight it, everything has been

// programmed with the dragenter event handler only; no more dragleave needed

// For the dragenter event, e.target corresponds to the element into which the

// drag enters. This fact has been used to program the code as follows:

var previousRow = null;

function handleDragEnter(e) {

// Assure that dragenter code is only executed when entering an element (and

// for example not when entering a text node)

if (e.target.nodeType === 1) {

// Get the currently entered row

let currentRow = this.closest('tr');

// Check if the currently entered row is different from the row entered via

// the last drag

if (previousRow !== null) {

if (currentRow !== previousRow) {

// If so, remove the class responsible for highlighting it via CSS from

// it

previousRow.className = "";

}

}

// Each time an HTML element is entered, add the class responsible for

// highlighting it via CSS onto its containing row (or onto itself, if row)

currentRow.className = "ready-for-drop";

// To know which row has been the last one entered when this function will

// be called again, assign the previousRow variable of the global scope onto

// the currentRow from this function run

previousRow = currentRow;

}

}

Very basic comments left in code, such that this code suits for beginners too. Hope this will help you out! Note that you will of course need to add all the event listeners I mentioned above onto each table cell for this to work.