CODEWITHSUNDEEP
jqueryjquery-ui
Annie Tsai
Annie Tsai

Reputation: 117

Multiple drag and drop using jQuery UI

I tried to make multiple drag and drop items through different blocks using jQuery UI.

The problem is that I don't know how to show the items in the input bar below for what I've dragged to 'Second Articles', it only works when I dragged items to the First Articles.

Actually, I don't know how to put updateAdd() into line31, or should I write another function to do this? enter image description here

Sorry, I'm not sure is it clear of the problem because my English isn't good. Check the code on Codepen then you might know what I'm talking about: https://codepen.io/anniesnoopymd/pen/brKdGM?editors=1010

Any ideas are highly appreciated! Thanks for your help. :)

Upvotes: 0

Views: 490

Answers (1)

Sablefoste
Sablefoste

Reputation: 4192

Just change the update event to an anonymous function, calling updatePostOrder() and updateAdd():

update: function(){
            updatePostOrder();
            updateAdd();
        }

You can then eliminate those calls at the end of your main function.

In total:

$(function () {
    $('.droptrue').on('click', 'li', function () {
        $(this).toggleClass('selected');
    });

    $("ul.droptrue").sortable({
       ...
        },
        start: function (e, ui) {
            ...
        },
        receive: function (e, ui) {
           ...
        },
        stop: function (e, ui) {
            ...
        },
        update: function(){
            updatePostOrder();
            updateAdd();
        }
    });
    $("#sortable1, #sortable2, #sortable3").disableSelection();
    $("#sortable1, #sortable2, #sortable3").css('minHeight', $("#sortable1, #sortable2").height() + "px");
});

See this forked Codepen: https://codepen.io/anon/pen/LjrpgX?editors=1010

Upvotes: 1

Related Questions