Javascript 如何使用“取消”停止可排序事件

我有一个

draggable

列表和一个

sortable

列表。

draggable

列表将包含所有可能的项。

sortable

列表是用户的选择

我希望

可排序的

对

接收

进行检查，以查看该项是否已存在，如果已存在，请停止排序并

将该项还原回可拖动列表。但是，即使当
取消
事件触发时，
更新
事件仍会继续，并且不会发生还原

我错过了什么

这是小提琴：

HTML:

我不太明白你为什么选择Dragable+sortable而不是2个相连的sortable

所以我用这个方法尝试了一下，我得到了这样的结果：

$("#teams").sortable({
    revert: true,
    connectWith: "#poll",
    start: function () {
        console.log('start');
        var order = $('#poll').sortable("toArray", {
            attribute: "data-id"
        });
        $('#poll').data('order', order);
    }
}).disableSelection();


$("#poll").sortable({
    revert: true,
    receive: function (event, ui) {
        console.log('receive');
        var order = $('#poll').data('order');
        var id = $(ui.item).data('id').toString();
        if ($.inArray(id, order) != -1) {
            console.log('CANCELLED');
            $(ui.sender).sortable("cancel");
        } else {
            console.log('NOT CANCELLED');
        }
    }
}).disableSelection();

主要问题是获取正确的项目数组，因为在接收事件中，数组已经用“新”添加的项目更新。我必须将它放在另一个可排序表的开始事件的数据中，并在接收事件中将其恢复

我仍然觉得有些事情不太令人满意：


在启动和接收回调中使用id选择器；但是事件参数不包含我需要的元素
还原效果相当。。。诡异的

无论如何，这是我能达到的最接近你期望的结果；我还为你做了一个检查

如果你能做得更好，请告诉我是否有帮助/发布你的代码。
我不太明白你为什么选择draggable+sortable而不是2个连接的sortable

所以我用这个方法尝试了一下，我得到了这样的结果：

$("#teams").sortable({
    revert: true,
    connectWith: "#poll",
    start: function () {
        console.log('start');
        var order = $('#poll').sortable("toArray", {
            attribute: "data-id"
        });
        $('#poll').data('order', order);
    }
}).disableSelection();


$("#poll").sortable({
    revert: true,
    receive: function (event, ui) {
        console.log('receive');
        var order = $('#poll').data('order');
        var id = $(ui.item).data('id').toString();
        if ($.inArray(id, order) != -1) {
            console.log('CANCELLED');
            $(ui.sender).sortable("cancel");
        } else {
            console.log('NOT CANCELLED');
        }
    }
}).disableSelection();

主要问题是获取正确的项目数组，因为在接收事件中，数组已经用“新”添加的项目更新。我必须将它放在另一个可排序表的开始事件的数据中，并在接收事件中将其恢复

我仍然觉得有些事情不太令人满意：


在启动和接收回调中使用id选择器；但是事件参数不包含我需要的元素
还原效果相当。。。诡异的

无论如何，这是我能达到的最接近你期望的结果；我还为你做了一个检查

如果你能做得更好，请告诉我是否有帮助/发布你的代码。
HTML:

<div class="leftDiv">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
</div>
<div class="rightDiv">

</div>

来源：
HTML:

<div class="leftDiv">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
</div>
<div class="rightDiv">

</div>

来源：
请将您的代码张贴在此处，以便将来的so访问者可以看到它。请将您的代码张贴在此处，以便将来的so访问者可以看到它。@Florian--谢谢。我一直在使用两个排序表，但原始列表不应该是可排序的——只是可以拖动。我想这在可用性上并没有太大的区别，尽管这可能会让人困惑。如果使用两个排序表更有意义，而且效果更好，我同意。@Florian--谢谢。我一直在使用两个排序表，但原始列表不应该是可排序的--只是可拖动的。我想这在可用性方面没有太大区别，但可能会让人困惑。如果使用两个排序表更有意义，而且效果更好，我我同意。@xgreen——我不知道你为什么认为我没有做任何研究——我发布了一个几乎可以工作的原型，这是我为使它按我的要求工作而构建的6-7个原型中的一个，但没有成功。@xgreen——我不知道你为什么认为我没有做任何研究——我发布了一个几乎可以工作的原型，这是我建造的大约6-7座建筑中的一座，我试图让它按我想要的那样工作，但没有成功。
$(document).ready(function(){
    $(".leftDiv .item").draggable({
        helper: function(ev, ui) {
            return "<span class='helperPick'>"+$(this).html()+"</span>";
        },
        connectToSortable: ".rightDiv"
    });

    $(".rightDiv").sortable({
        'items': ".item",
        'receive': function(event, ui){
            // find the class of the dropped ui, look for the one with the integer suffix.
            var clazz = getClassNameWithNumberSuffix(ui.item);
            $('.leftDiv .' + clazz).draggable( "option", "revert", true )
            if($('.rightDiv .' + clazz).length > 1){
                $('.rightDiv .' + clazz + ':not(:first)').remove();                
            }
        }
    });

});

function getClassNameWithNumberSuffix(el) {
  var className = null;
  var regexp = /\w+\d+/;
  $($(el).attr('class').split(' ')).each(function() {
    if (regexp.test(this)) {
      className = this;
      return false;
    }
  });

  return className;
}

.leftDiv, .rightDiv {width:120px; float:left; border:1px solid #000; padding:5px; margin:10px; min-height:130px}
.rightDiv {margin-left:40px}

.item {height:20px; line-height:20px; text-align:center; border:1px solid #EEE; background-color:#FFF}

.helperPick {border:1px dashed red; height:20px; line-height:20px; text-align:center; width:120px}