如果无效，则 jQuery 可排序取消事件

Question

我有一个可排序的列表。在开始排序之前，我想检查该列表的所有元素是否有效。如果没有，请取消活动并保持列表不变。

您可以在此处找到代码 http://jsfiddle.net/DZYW5/4/

当我使用这个时，事件被取消，但元素被移除。

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

也许我应该实现一个“beforeStart”事件？建议？

Answer 1

您可以使用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" );
        }
    }
});

演示：Fiddle

Answer 2

我发现在不遇到一些 jQuery UI 错误的情况下取消排序的唯一方法是异步取消排序。

使用其他人建议的停止选项是不可接受的，因为它允许用户先在屏幕上拖动项目，然后在完成后取消它。这不满足 OP 最初对“防止”拖动某些项目的关注。

如果您尝试在排序事件期间取消可排序，您将在 jQuery UI 中遇到错误。 Uncaught TypeError: Cannot read property '0' of null之类的错误

我可以开始工作的唯一解决方案是，当用户开始拖动时，屏幕上会出现短暂的闪烁。但是它立即取消了拖动，并且没有任何JS错误。

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
    },
});