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.

CUSTOM ATTRIBUTES FOR HTML ELEMENTS

Custom attributes on HTML elements have been quite handy for storing custom values. Though they were not standardized in previous HTML specifications, browsers allowed their usage. In the HTML5 specification, they have been standardized, making them a nice little tool in the developer's box.

HTML5 IMPLEMENTATION
For usage the custom attributes names must be prefixed by "data-", therefore making a valid custom attribute name be "data-foo". The custom attribute values implementation remain as before.
An example

ACCESS

There are two methods to retrieve and set the values of the custom attributes are as follows:-

GetAtrribute & SetAtrribute
 The previously known method of using the getAttribute and setAttribute methods for getting and setting the custom attributes.
Here is an example:

DATASET

The dataset method is a new method implemented in the HTML5 specification. The code snippet below shows and example of its usage.

Note: This method has not been implemented in any browser yet, so stick to the getAttribute/ setAttribute option. The other benefit is backward compatibility for older browsers.

In this method only the string prefixed by "data-" is used as the object of the dataset property to access the specific custom attribute.

Note: This method has not been implemented in any browser yet, so stick to the getAttribute/ setAttribute option. The other benefit is backward compatibility for older browsers.

For more reading:
http://html5doctor.com/html5-custom-data-attributes/
http://ejohn.org/blog/html-5-data-attributes/