Wednesday 23 May 2012

GETTING THE ELEMENT BELOW DURING A DRAG

I am writing a small JavaScript library to handle drag and drop, and was thinking of a way to find the element below the current element being dragged.

The way as explained in blog i stumbled upon , is to get the mouse position coordinates, then calculate the current position of the element being dragged relative to the topmost element using offsetLeft, offsetTop, offsetParent , add the offsetWidth and offsetHeight and then check if the element below....(can't remember everything).... and this will done for every pixel drag .



Also it is said that an element which the position is set to "absolute" or "fixed" does not affect the layouts of other elements on the page so only repaints on that element will be done rather than reflows on the whole page.

During a drag, the element being dragged has its position set to absolute (all the time) so changes to the display of the style property only causes a repaint on the dragged element, making it a less expensive operation than the  former.

Just looking a these imagine the amount of reflows and redraws.
So i came up with this hack (this can be implemented differently)


The idea is, during the drag (for every pixel move) , i hide the top element, get the element below and the show the  top element again. it happens so fast it is not noticed.

Let me know your thoughts.

No comments:

Post a Comment