其他分享
首页 > 其他分享> > Dom drag enter and leave

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.
example

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

标签:box,will,dragenter,dispatched,leave,drag,enter,dragleave,line
来源: https://www.cnblogs.com/kongshu-612/p/15790157.html