如何添加對排序的限制

Question

我想將最多4個項目從一個排序拖動到另一個排序。我該怎麼做？我正在使用this script。

這裏是我的代碼：

<div class="row-fluid"> 
    <div class="span6"> 
     <ol class="simple_with_animation vertical"> 
     <li>Sharlon</li> 
     <li>Biliosa</li> 
      <li>Sharlon</li> 
     <li>Biliosa</li> 
      <li>Sharlon</li> 
     <li>Biliosa</li> 
     </ol> 
    </div> 
    <div class="span6"> 
    <ol class="simple_with_animation vertical highlightmenu"> 
     <li class="highlight">Item One</li> 
     <li class="highlight">Item Two</li> 
       <li class="highlight">Item One</li> 
     <li class="highlight">Item Two</li> 
       <li class="highlight">Item One</li> 
     <li class="highlight">Item Two</li> 
    </ol> 
    </div> 
</div> 

//This activalion for drug list 

var adjustment 

$("ol.simple_with_animation").sortable({ 
    group: 'simple_with_animation', 
    pullPlaceholder: false, 
    // animation on drop 
    onDrop: function (item, targetContainer, _super) { 
     var clonedItem = $('<li/>').css({ 
      height: 0 
     }) 
     item.before(clonedItem) 
     clonedItem.animate({ 
      'height': item.height() 
     }) 

     item.animate(clonedItem.position(), function() { 
      clonedItem.detach() 
      _super(item) 
     }) 
    }, 

    // set item relative to cursor position 
    onDragStart: function ($item, container, _super) { 
     var offset = $item.offset(), 
      pointer = container.rootGroup.pointer 

      adjustment = { 
       left: pointer.left - offset.left, 
       top: pointer.top - offset.top 
      } 

     _super($item, container) 
    }, 
    onDrag: function ($item, position) { 
     $item.css({ 
      left: position.left - adjustment.left, 
      top: position.top - adjustment.top 
     }) 
    } 
}); 

//This activation for drug list - drug list 
var oldContainer 
$("ol.nested_with_switch").sortable({ 
    group: 'nested', 
    afterMove: function (placeholder, container) { 
     if (oldContainer != container) { 
      if (oldContainer) oldContainer.el.removeClass("active") 
      container.el.addClass("active") 

      oldContainer = container 
     } 
    }, 
    onDrop: function (item, container, _super) { 
     container.el.removeClass("active") 
     _super(item) 
    } 
}); 

Answer 1

沒有直接的方式做到這一點，所以你必須實行綁定到onDrop事件的功能。

當此事件觸發時，您必須計算可排序列表中所有<li>元素的數量。如果計數小於最大值4，則允許接收事件繼續。否則，請觸發cancel方法。

$("ol.nested_with_switch").sortable({ 

    ... //previous code 

    over : function(event, ui){ 

    if ($("ol.nested_with_switch li").length > 4){ 
     $("ol.nested_with_switch").sortable("cancel); 
    } 
    } 
});