Question

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

我希望sortable检查receive以查看该项是否已存在，如果是，请停止排序并将项revert恢复为可拖动列表。但是，即使cancel事件触发，update事件仍会继续，并且恢复永远不会发生。

我错过了什么？

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

我不太明白为什么你选择了draggable + sortable而不是2个可连接的sortables。

所以我尝试使用这种方法，我带来了类似的东西：

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

主要问题是获取正确的项目数组，因为在接收事件中，数组已经使用＆＃34; new＆＃34;添加项目。我不得不将其放在另一个可排序的启动事件的数据中，并将其恢复到接收事件。

我仍然发现一些不太令人满意的事情：

在启动和接收回调中使用id选择器;但是事件参数并不包含我需要的元素
还原效果非常......很奇怪

无论如何，这是我能达到预期的最接近的;我也为jsfiddle做了检查。

如果您能做得更好，请告诉我它是否有助于/发布您的代码。

Answer 2

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>

JS：

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

CSS：

.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}

来源：http://jsfiddle.net/perrytew/RxKkA/3/

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

2 个答案: