Question

如果该项目已存在，如何取消对某个项目进行排序？

我左侧有一组项目，右侧有一个可排序列表。左侧的可拖动项目可以放在可排序列表中。

请注意：左侧的项目是可拖动的，不可排序。

我尝试了所有这些，但没有一个工作：

ui.sender.sortable("cancel");
ui.item.sortable("cancel");
ui.helper.sortable("cancel");
ui.sender.remove();
ui.item.remove();
ui.helper.remove();

小提琴在这里 - http://jsfiddle.net/NA6c8/2/

Answer 1

嗯，这感觉不够优雅，但它完成了工作。这是一个jsfiddle，显示我要解释的内容： http://jsfiddle.net/perrytew/RxKkA/3/

设定：我删除了每个项目的ID，因为它们将被克隆到副本上，以避免在文档中使用相同的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>
<div id='errorMessage'></div>

为了使它工作，我在可排序对象的'receive'事件中添加了一个钩子。当那个被解雇时，我做了两件事：

将拖动项目的恢复设置为true，以便将来的拖动回弹。
检查项目是否已存在于删除表中。如果是这样，我删除了新的。

它似乎是jquery ui的设计缺陷，因为即使将revert设置为true，拖动的项目仍会被删除。它还原，但下拉表中仍会出现副本。所以这就是我用remove()电话进行清理的原因。它感觉很乱，但它给人一种非常令人满意的视觉体验。我添加了一条淡出消息，提醒用户拖动失败的原因。

干杯。

使用Javascript：

$(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(); 
                var msg = $('#errorMessage');
                msg.html(ui.item.html() + ' already added.  Duplicates not allowed');
                msg.show();
                msg.fadeOut(3000);               
            }
        }
    });

});

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}

#errorMessage{
    margin:10px;
    clear:both;
    color:red; font-weight:bold;
}

Answer 2

你试过.sortable( "destroy" )吗？

http://jqueryui.com/demos/sortable/请参阅此处的方法

Answer 3

刚刚接过Perry Tew的小提琴并改变了一下。为了避免“id-problem”，我只是插入了一个“card”属性并对其进行了计数。这样你就不需要第二个功能了。见http://jsfiddle.net/RxKkA/17/

如果项存在，则jquery取消可排序

3 个答案: