javascript - 如何用取消停止可排序事件

Question

我有一个draggable 列表和一个sortable 列表。 draggable 列表将包含所有可能的项目。 sortable 列表是用户的选择。

我希望 sortable 对 receive 进行检查以查看该项目是否已存在，如果存在，则停止排序并还原 项目回到可拖动列表。但是，即使触发了 cancel 事件，update 事件也会继续并且永远不会发生还原。

我错过了什么？

这是 fiddle :http://jsfiddle.net/XW48M/1/

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5">
            <ul id="teams" class="list-group">
                <li class="list-group-item poll-assets" data-id="1" data-name="Team 1">Team 1</li>
                <li class="list-group-item poll-assets" data-id="2" data-name="Team 2">Team 2</li>
                <li class="list-group-item poll-assets" data-id="3" data-name="Team 3">Team 3</li>
            </ul>
        </div>
        <div class="col-md-5">
            <ul id="poll" class="list-group">
                <li id="1" class="list-group-item poll-item" data-id="1" data-name="Team 1">Team 1</li>
                <li id="4" class="list-group-item poll-item" data-id="4" data-name="Team 4">Team 4</li>
                <li id="5" class="list-group-item poll-item" data-id="5" data-name="Team 5">Team 5</li>
            </ul>
        </div>
    </div>
</div>

Javascript:

$(document).ready(function () {
    $("#poll").sortable({
        revert: true,
        update: function (event, ui) {
            console.log('update');
            var order = $("#poll").sortable("toArray");
            if ($(ui.item).hasClass('ui-draggable')) {
                $(ui.item).addClass('poll-item').removeClass('ui-draggable draggable').attr('id', $(ui.item).data('id'));
            }
        },
        receive: function (event, ui) {
            console.log('receive');
            var order = $( "#poll" ).sortable( "toArray" );
            var id = $(ui.item.data('id'));
                if ($.inArray(id, order)) {
                $("#poll").sortable('cancel');
                console.log('CANCELLED');
                return;
            } else {
                $(ui.item).remove();
            }
        }
    }).disableSelection();

    $('#teams')
        .find('.poll-assets').draggable({
        opacity: 0.75,
        appendTo: document.body,
        helper: 'clone',
        connectToSortable: '#poll',
    }).disableSelection();
});

Answer 1

我不太明白您为什么使用可拖动 + 可排序而不是 2 个连接的可排序。

所以我尝试使用这种方法，我得到了类似的东西:

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

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

我仍然觉得有些事情不是很令人满意:

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

无论如何，这是我能达到的最接近您预期的结果；我还做了一个jsfiddle供您检查。

让我知道它是否有帮助/如果你能得到更好的东西，请发布你的代码。