jquery ui selectable add/remove class on selected/unselected

Question

Using jquery ui selectable , How it is possible to add a custom class on selected/selecting event and removing it on unselected/unselecting

I know we can style selection using CSS:.ui-selected{} but this deosnt help if I want to add custom class like ui-state-focus.

For Try, you can use my Fiddle.http://jsfiddle.net/bababalcksheep/CjT3r/2/. In this example i want to add/remove ui-state-focus class on selected/unselected

Answer 1

If you are happy with using JavaScript for that, you can do it by handling the events:

• selecting
• selected
• unselecting
• unselected

To add/remove your custom classes.

Say you have classA for "selecting" and classB for "selected". Your selectable should be created like this:

$(".ui-splitselect-list").selectable({
    cancel: ".ui-splitselect-item .ui-splitselect-handle-drag",
    selecting: function (event, ui) {
        $(ui.selecting).addClass('classA');
    },
    unselecting: function (event, ui) {
        $(ui.unselecting).removeClass('classA');
    },
    selected: function (event, ui) {
        $(ui.selected).addClass('classB');
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('classB');
    }
});

Applied to your fiddle: http://jsfiddle.net/CjT3r/4/