Question

I have some simple drag and drop functionality on a page, where you drop an element into a target area and that element will snap to its designated place within the target area. Currently I am accomplishing this with a “drop” event handler that adds a class to the element with the correct positions, and then removes the position styling that jQuery defined(to position the element while dragging). Thus the element is moved to its correct place.

However, I want to give the element a nice animation moving it from where you dropped it rather than just having it appear at the new place instantly. The problem is that jquery allows me to animate from one style to another style, or from one class to another class, but not to animate from a style to a class. I’ve tried doing this:

feature.addClass('selected');
feature.animate({
    'top': '',
    'left': '',
    'bottom': '',
    'right': ''
});

where “selected” contains definitions for top and left. But what that does is move the element to 0,0 (rather than animate the process of removing the styles which is what I want).

Does anyone know how I can do this? I could store the coordinates in the element data, but I want them to be defined in the CSS. Alternately, is there a way I could use Javascript to read the selected position from the CSS and store it dynamically? i.e. find out “for this element, what would be the values of top and left if I were to add the selected class”.

Answer 1

Thanks for the idea @Huangism, I got it to work like so:

• Created an invisible “position tester” div
• During initialization, copied the classes from each draggable element to that div, and used it to test the position they’ll be dropped to
• Stored those positions in the draggable elements
• Then, in the drop handler I update the element’s style to those stored positions, allowing me to animate it