Question

I’m working on a project that needs a lot of draggable items on one droppable place, I know how to create draggable and droppable items with the various options, but what I’d like to do is give these a custom look. Is there a way to do this? I’ve bbeen searching google for ‘jquery change draggable shape’ and other varients with no luck.

Answer 1

Depends on how much customization you need. If you just need a couple CSS tweaks, then:

Draggable elements gets a class of
ui-draggable
During drag the element also gets a class of
ui-draggable-dragging

So you can could key your changes on .ui-draggable-dragging and whatever other selectors you have to narrow it down.

If you want to do something that requires more than just a couple CSS tweaks, then you can render the whole draggable version yourself with the helper option:

Allows for a helper element to be used for dragging display. Possible values: ‘original’, ‘clone’, Function. If a function is specified, it must return a DOMElement.

So something like this would offer a lot of flexibility:

$(...).draggable({
    //...
    helper: function(e) {
        return $('a bunch of pretty HTML');
    }
 });