Tengo un problema con el comportamiento del javascript 'ondragleave' que se dispara entre elementos secundarios.
Vea el ejemplo con un código simple.
El problema es que los registros no permanecerían en rojo entre los dos elementos TD, aunque el mouse todavía está arrastrando el registro TR.
Hay algunas respuestas que incluyen contadores, pero ninguna parece funcionar.
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>Asumiendo que este es tu problema:
el problema es que los registros no se quedarían en rojo entre los dos elementos TD
Esto se puede resolver con CSS y no tiene nada que ver con 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>