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

时间:2013-08-27 16:23:33

标签: jquery jquery-ui-sortable

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

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

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

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

也许我应该实施“beforeStart”活动?建议?

2 个答案:

答案 0 :(得分:5)

您可以使用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

答案 1 :(得分:3)

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