jQuery UI Sortable on Click

Question

I have the jQuery UI sorting functionality working fine, but I would also like to add in a basic click action to cause the draggable items to change <ul>. I have the <div class="click_area"> disabled from dragging. What I would like is in the first <ul> if the click_area is clicked then the sortable <li> would move to the second <ul> just as if I had dragged it over. Same deal if the click_area is clicked in the second <ul> it will be moved to the first <ul>. I have created a JS Fiddle for testing: http://jsfiddle.net/helpinspireme/wMnsa/

Any suggestions would be greatly appreciated. Thanks.

mdarwi · Accepted Answer · 2012-03-19 20:56:42Z

7

$("#unassigned_list, #recipients_list").sortable({
    connectWith: ".connected_sortable",
    items: "li",
    handle: ".draggable_area",
    stop: function(event, ui) {
        updateLi(ui.item);
    }
}).disableSelection().on("click", ".click_area", function() {
    // First figure out which list the clicked element is NOT in...
    var otherUL = $("#unassigned_list, #recipients_list").not($(this).closest("ul"));
    var li = $(this).closest("li");

    // Move the li to the other list. prependTo() can also be used instead of appendTo().
    li.detach().appendTo(otherUL);

    // Finally, switch the class on the li, and change the arrow's direction.
    updateLi(li);
});

function updateLi(li) {
    var clickArea = li.find(".click_area");
    if (li.closest("ul").is("#recipients_list")) {
        li.removeClass("ui-state-default").addClass("ui-state-highlight");
        clickArea.html('&#8592;');
    } else {
        li.removeClass("ui-state-highlight").addClass("ui-state-default");
        clickArea.html('&#8594;');
    }    
}

edited Mar 19, 2012 at 20:56

answered Mar 19, 2012 at 19:30

mdarwi

9335 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Help Inspire Over a year ago

This solution works perfectly. I had one more question. The classes change on click which is great, but can that action also be applied to the 'draggable' state? When I drag the <li> it does not change classes which I know your script above doesn't handle that, I am just wondering how I could make that happen. I have updated my JS Fiddle. jsfiddle.net/helpinspireme/wMnsa Thanks.

mdarwi Over a year ago

@HelpInspireMe I updated my answer to hopefully answer your question. Note that I also am now using .on() instead of .find().click(), as is recommended for the newer versions of jQuery.

Help Inspire Over a year ago

I very much appreciate your assistance on this. If anyone wishes to see the final product here is a JS Fiddle I plan to save. jsfiddle.net/helpinspireme/wMnsa

Andrew · Accepted Answer · 2012-03-19 19:30:31Z

3

Here is a starting place for you,

.on('click', '.click_area', function(){
    $(this).parent().appendTo($("#unassigned, recipients").not($(this).closest("ul")));
})

The trick being that the click handler is on the parent container not the individual children, so when they are moved you don't need to keep managing their handlers.

All you need to do is update the stylings.

jsFiddle

answered Mar 19, 2012 at 19:30

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

Collectives™ on Stack Overflow

jQuery UI Sortable on Click

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related