jQuery UI - How to know if dragged element is on top of element #x?

Question

I have multiple draggable elements and I don't want them to be dropped on top of each other. I'd want the dragged element to appear light green when dragged, but once it's over element with certain class, it would turn red. If it would be dropped it would revert to its original position.

Everything else is simple, but I would need an event for "entering" another element.

I haven't found any integrated function or a plugin to solve my problem.

I can't think of any other way of doing this myself than keeping record of all elements locations and sizes, then comparing to them on drag event. However it would be so heavy the dragging would be painful.

So, any suggestions? A plugin I haven't found perhaps? :)

Answer 1

I doubt a plugin is necessary. You haven't described a drag/drop behaviour that is any different from what can already be handled using vanilla jQuery UI.

From what I understand, you have a bunch of draggables that share a common purpose, but their droppables need to change depending on which one was dragged. All that's needed is to hook into the start event of the draggables and conditionally change the accept options of the droppables you want them to work with.

Running a quick test myself, it does not appear that jQuery UI inserts any more CSS classes into the draggable-helper if it is over a droppable, so you cannot use pure CSS to change the colour of the helper when it is over a droppable.

But instead of hooking into the drag method of the draggable to constantly monitor which element it is over, you can simply use the over and out methods of your droppables to add and remove a class to the draggable-helper. Since you would set the accept options on drag-start (as I described previously), the over method will only be called on elements that you want the colour of the helper to change.

Sorry I've not posted any code examples, but hopefully the explanation is helpful.