Question

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

当我使用它时，事件被取消，但元素被删除。

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

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

2 个答案: