Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery UI Sortable Disable Update function before receive

I'm using jquery ui to process a list that you can sort within and then also sort between another list. I'm using the update for the sorting within and that works fine. When I sort between I just want to call the receive function and not the update. Currently, update gets called and then receive gets called. Is there any way to skip the update call when sorting between lists?

<script>
            $ = jQuery
            $(function() {
                $( "#sortable1).sortable({
                    connectWith: ".connectedSortable",
                    placeholder: "ui-state-highlight",
                    update: function(event, ui) {processSortWithin(ui.item.attr("id"), ui.item.index()); },
                    receive: function(event, ui){ 
                        processSortBetween(ui.item.attr("id"), ui.item.index(),ui.sender.attr("id"));
                    }
                }).disableSelection();
            });

        </script>
like image 374
c12 Avatar asked Apr 07 '11 19:04

c12


2 Answers

Answer from: http://forum.jquery.com/topic/sortables-update-callback-and-connectwith

update: function(e,ui) {
    if (this === ui.item.parent()[0]) {
        //your code here
    }
}
like image 91
Stefan Avatar answered Oct 07 '22 00:10

Stefan


I had a similar problem today, and the only solution I found was to introduce a flag variable that is set during update event, and checked during stop event.

In your example, you use receive event which will be fired on the list that receives new element from some other list, so it should be set inside $(".connectedSortable").sortable() options.

Here is my way to distinguish whether to sort (within one list, processed in stop) or to move (between two lists, processed in receive):

$(function() {
    position_updated = false; //helper flag for sortable below

    $(".sortable").sortable({
        connectWith: ".sortable",
        update: function(event, ui) {
            position_updated = !ui.sender; //if no sender, set sortWithin flag to true
        },
        stop: function(event, ui) {
            if (position_updated) {
                processSortWithin(ui.item.attr("id"), ui.item.index());
                position_updated = false;
            }
        },
        receive: function(event, ui) {
            processSortBetween(ui.item.attr("id"), ui.item.index(),ui.sender.attr("id"));
        }
    }).disableSelection();
});

function processSortWithin(id, position) {
    alert("sort within");
}

function processSortBetween(id, position, sender_id) {
    alert("sort between");
}

Working example: http://jsfiddle.net/myLff/2/

like image 39
bkmn Avatar answered Oct 06 '22 23:10

bkmn