CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Levi Campbell
Levi Campbell

Reputation: 6095

How do I change the shape or look of jquery UI controls?

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.

Upvotes: 1

Views: 317

Answers (3)

mu is too short
mu is too short

Reputation: 434596

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');
    }
 });

Upvotes: 1

Ben
Ben

Reputation: 21249

I remember using this technique to add a custom class to the cloned drag helper a while back.

Haven't tried with a recent jquery ui release but that should still work.

Then you can apply css to your custom class.

If you really want to go crazy, you can also add other html elements inside the ui.helper element when the start event fires. Just use the standard jquery append, prepend, whatnot..

Upvotes: 0

Amin Eshaq
Amin Eshaq

Reputation: 4024

You have the ability to change the look of all of jQuery ui's styles with css. They even have a theme generator to make it easy to customize the look here

Upvotes: 0

Related Questions