Dom drag enter and leave

Dom dragenter dragleave

Assume we have bellow Dom Structure, And we are interested to the dragenter dragleaveevent on the dash-line box. in which order the event will be fired.

• Left Dom
  • A1 to A2, dragenter will be dispatched from A2
  • A2 to A3, dragleave will be dispatched from A2, dragenter will be dispatched from A3
  • A3 to A4, dragleave will be diapatched from A3, dragenter will be dispatched from A4
• Right Dom
  • B1 to B2, dragenter will be dispatched from dashed line box
  • B2 to B3, dragleave will be dispatched from dashed line box, dragenter will be dispatched from B3
  • B3 to B4, dragleave will be dispatched from B3, dragenter will be dispatched from dashed line box
  • B4 to B5, dragleave will be dispatched from dashed line box, dragenterwill be dispatched from B5.

So How can we make sure if dragenter , dragleave will be notificed correctlly on the dash lined box?

Well, Here we give a hack way.
we need the help of MouseEvent.relatedTarget. we need the help of )relatedTarget and target. from MDN, relatedTarget will be previous box for dragenter and dragleave. target will be the target box. So, whatever the event is emitted, we just make sure the direction is from out of dashed line to internal. and from internal to the out. We can only take actions when the condition match.

we will use const {left,top}=HTMLElement.getBoutndingClientRect(),we just compare the left top with the dashed line box