3

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

你可以在这里找到代码 http://jsfiddle.net/DZYW5/4/

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

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

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

4

2 回答 2

7

您可以使用取消方法

$("#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" );
        }
    }
});

演示：小提琴

于 2013-08-27T16:31:08.430 回答
5

我发现在不遇到一些 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
    },
});

于 2016-06-10T16:04:48.850 回答