CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Yamaha32088
Yamaha32088

Reputation: 4163

Remove class after sort in jQuery UI?

I have two connected jQuery UI sort lists. I am attempting to remove the selected class immediately after it is dropped into a different list. So if I drop an item from the list on the left into the list on the right, the selected class should be removed so it does not remain highlighted.

I have tried putting $('ul').find('li.selected').removeClass('selected'); inside of the stop, beforeStop, update, out sortable methods but none of them seem to delete the class after it has been dropped.

Some other things I have tried is inside of the stop method adding info.item.removeClass('selected') but it does absolutely nothing. What am I missing?

Here is a jsfiddle.

Below is the code in its entirety.

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<li/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        $('ul').find('li.selected').removeClass('selected');
        info.item.after(info.item.data('multidrag')).remove();
    }

});

HTML:

<p>Multi-select Drag</p>
<p>
    <kbd>Click</kbd> to select individual items<br />
    <kbd>Ctrl + Click</kbd> to select multiple items
</p>
<br />

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

Upvotes: 1

Views: 1247

Answers (3)

SebCar
SebCar

Reputation: 338

Check this http://jsfiddle.net/hjyv9yv2/1/

var lastSelected = 0, list;
$("ul").on('click', 'li', function (e) {
list = $(this).parent();
if (lastSelected !== list.index()){
    $('ul li').removeClass('selected');
}
if (e.ctrlKey || e.metaKey) {
    $(this).toggleClass("selected");
} else {
    $(this).addClass("selected").siblings().removeClass('selected');
}
lastSelected = list.index();

}).

If the user click on the another list, remove the 'selected' classname in both lists

Upvotes: 0

tcooc
tcooc

Reputation: 21209

The issue is that the li.selected element is still being dragged when stop is called, so it's not actually a child of the ul element. To fix this, reference it in the event object:

$(e.toElement).removeClass('selected');

To handle multidrag (deselect all elements when finished dragging multiple elements):

info.item.data("multidrag").removeClass('selected');

Upvotes: 1

JGV
JGV

Reputation: 5187

Remove the 'selected' class inside a setTimeout() function.

Please see the code below,

http://jsfiddle.net/bb4nkpyp/3/

stop: function (e, info) {       
        setTimeout(function(){ $('ul').find('li.selected').removeClass('selected'); }, 10);

        info.item.after(info.item.data('multidrag')).remove();
    }

Upvotes: 1

Related Questions