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

Question

如果某个项目已经存在，如何取消该项目的可排序？

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

请注意:左侧的项目可拖动且不可排序。

我尝试了所有这些，但没有一个有效:

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

fiddle 在这里 - 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>

为了使其正常工作，我向可排序对象的“接收”事件添加了一个钩子(Hook)。当它触发时，我做了两件事:

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

这似乎是 jquery ui 的设计缺陷，因为即使将 revert 设置为 true，拖动的项目仍然会被丢弃。它会恢复，但副本仍然出现在删除表中。这就是我使用 remove() 调用进行清理的原因。虽然感觉很hack，但是却给人一种非常满意的视觉体验。我添加了一些淡出消息来提醒用户拖动失败的原因。

干杯。

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