jQuery UI Draggable - need to modify element while dragging

Question

Hi,

I'm playing with Drag and drop funcitonality for the first time so I'm not entirely sure what I'm doing!

I need to add a class to a "portlet" while it is being dragged. I don't want to use the clone functionality because I want the user to drag the actual element, I just want to nodify the element while it is being dragged and reset it when it's dropped.

Can anybody help?

Answer 1

Perhaps there's some sort of a 'beforedrag' event you can bind to? It would be easier to add the class to an element before the user actually starts dragging it, rather than during.

If you're using jQuery UI, there's a 'start' event on draggable you can use:

http://docs.jquery.com/UI/Draggable#events

Answer 2

Also, you can use the "helper" option like this:

helper : function(ev, el) {
  return ($(el).clone().addClass("beingDragged"));
}

Should your portlets become in the future too heavyweight to drag, you could use that to build a simplified version while dragging to smooth things out :)