I have a problem with the behaviour of the javascript 'ondragleave' that is fired between child elements.
See the example with some simple code.
The problem is that the records would not stay red between the two TD elements, although the mouse is still dragging in the TR record.
There are some answers that include counters, but non of them seems to make is possible to work
function enter(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '#AA0000';
}
function leave(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '';
}<p draggable="true" id="dragtarget">Drag me!</p>
<table width=100% style='border-spacing: 30px;'>
<tr id='record1' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 1-1</td>
<td>Record 1-2</td>
<td>Record 1-3</td>
<td>Record 1-4</td>
</tr>
<tr id='record2' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 2-1</td>
<td>Record 3-2</td>
<td>Record 4-3</td>
<td>Record 5-4</td>
</tr>
</table>Assuming this is your issue:
problem is that the records would not stay red between the two TD elements
This can be solved with CSS & has nothing to do with ondragleave:
function enter(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '#AA0000';
}
function leave(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '';
}<style>
td { padding: 0px; }
table { width: 100%; border-spacing: 0px; }
</style>
<p draggable="true" id="dragtarget">Drag me!</p>
<table>
<tr id='record1' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 1-1</td>
<td>Record 1-2</td>
<td>Record 1-3</td>
<td>Record 1-4</td>
</tr>
<tr id='record2' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 2-1</td>
<td>Record 3-2</td>
<td>Record 4-3</td>
<td>Record 5-4</td>
</tr>
</table>