CODEWITHSUNDEEP
jquery-ui
Vimalraj Theerkatharisi
Vimalraj Theerkatharisi

Reputation: 103

Jquery UI sortable - sort only on drop event

I want to disable sorting of items when item is dragged. Only after the drop has been completed the items must sort accordingly.

     $( "#sortable" ).sortable({

        tolerance: 'pointer',
        revert: 'invalid',
        forceHelperSize: true,
        scroll: true,
        forcePlaceholderSize: true,
        placeholder: 'ui-state-highlight',
        helper: 'clone',
        containment: 'parent',
        cursor: 'move',        
        distance: 5,
        opacity: 0.3,
    });

link:jsfiddle

Upvotes: 3

Views: 1147

Answers (1)

Julien Grégoire
Julien Grégoire

Reputation: 17124

One way to do it would be to micromanage placeholder position during the different events. It causes a problem with revert, but there's probably a way to resolve this somehow. And the behavior might not be exactly exactly the same, but again, a little tweak and it could be there. Anyway, my suggestion:

$(function () {
    $("#sortable").sortable({

        tolerance: 'pointer',
        //revert: 'invalid',
        forceHelperSize: true,
        scroll: true,
        forcePlaceholderSize: true,
        placeholder: 'ui-state-highlight',
        helper: 'clone',
        containment: 'window',
        cursor: 'move',
        distance: 5,
        opacity: 1,
        start: function (event, ui) {
            place_prev = ui.placeholder.prev();//get position when selecting item
        },
        change: function (event, ui) {
            place_pos = ui.placeholder.index(); //each change you gather where the placeholder is going
            place_prev.after(ui.placeholder);//then you place it back where it started
        },
        beforeStop: function (event, ui) {

            $('li').eq(place_pos).after(ui.item);//before stopping you place item where it was on last change event
        },

    });

});

http://jsfiddle.net/2mxw14vv/3/

Upvotes: 2

Related Questions