정렬에 끌기에 대한 제한을 추가하는 방법

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