jQuery sortable cancel event if not valid

Question

I have a list which is sortable. Before I start sorting, I want to check if all the elements of that list are valid. If not, cancel the event and leave the list intact.

You can find the code here http://jsfiddle.net/DZYW5/4/

When I use this, the event is canceled, but the element is removed.

start: function (event, ui) {
    if (!valid()) {
        return false;
        // it cancel's but the element is removed...
    }
}

Maybe I should implement a "beforeStart" event? Suggestions?

as a suggestion, you can cancel specific elements which should not be sorted and allow other valid elements to be sorted at the same time using the cancel option api.jqueryui.com/sortable/#option-cancel — Mandeep Jain
– Mandeep Jain, Commented Aug 28, 2013 at 7:40

Arun P Johny · Accepted Answer · 2013-08-27 16:31:08Z

8

You can use the cancel method

$("#list").sortable({
    connectWith: ".connectedSortable",
    items: '.sortable-item',
    handle: '.handle',
    placeholder: "ui-state-highlight",
    stop: function (event, ui) {
        console.log('stop')
        if (!valid()) {
            $( this ).sortable( "cancel" );
        }
    }
});

Demo: Fiddle

answered Aug 27, 2013 at 16:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

Pedro Bernardo Over a year ago

although it might confuse the users, it's good enough. thanks

C.P. Over a year ago

$( this ).sortable( "cancel" ); worked perfectly for single list sort. Thanks!

FirstVertex Over a year ago

this is awful! using the stop option is not what the OP asked for. allow the user to begin dragging, then cancel it at the end? a terrible experience. we need to be able to cancel it before it starts.

FirstVertex Over a year ago

here is the solution i came up with stackoverflow.com/a/37752652/213050 this cancels the sort at the beginning, and doesn't have any Js errors.

FirstVertex · Accepted Answer · 2016-06-10 16:04:48Z

The only way I have found to cancel a sort without hitting some jQuery UI bugs, is to asynchronously cancel the sort.

Using the stop option as others have suggested, is not acceptable, as it allows the user to drag the item around on the screen first, and then cancels it when they are done. This does not satisfy the OP's original concern to "prevent" dragging of certain items.

You will experience errors in jQuery UI if you try to cancel the sortable during the sort event. Errors like Uncaught TypeError: Cannot read property '0' of null

Only solution I could get to work, does have a brief flash on the screen as the user begins to drag. But it immediately cancels the drag, and doesn't have any JS errors.

var isCancel = false;
element.sortable({
    start: function() { isCancel = false; },
    sort: function(event, ui) {      // prevent dragging if row has dynamically assigned class
	if (ui.item.hasClass('no-drag')) {
	    isCancel = true;
	    // allow current jQuery UI code to finish runing, then cancel
	    setTimeout(function() {
		element.sortable('cancel');
	    }, 0);
	}
    },
    stop: function() {
    	if (isCancel) return;
    	// your normal processing here
    },
});

Collectives™ on Stack Overflow

jQuery sortable cancel event if not valid

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related