jquery之添加 5 个元素后创建轮播

我正在使用 jQuery UI Droppable Cart 演示插件，我想在 Dropped 区域达到 5 个元素后创建一个轮播或箭头...如果我单击“Arrows”，则应显示 remaning

<小时 />

FIDDLE

<小时 />

HTML

<div id="products"> 
  <h2>Drag</h2> 
  <div id="catalog"> 
      <ul> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
        <li>Item 4</li> 
        <li>Item 5</li> 
        <li>Item 6</li> 
      </ul> 
  </div> 
</div> 
 
<div id="cart"> 
  <h2>Drop Here...</h2> 
  <div class="ui-widget-content"> 
    <ol> 
      <li class="placeholder">Add your items here</li> 
    </ol> 
  </div> 
</div> 

jQuery

$(function() { 
    $( "#catalog li" ).draggable({ 
        appendTo: "body", 
        helper: "clone" 
    }); 
    $( "#cart ol" ).droppable({ 
        activeClass: "ui-state-default", 
        hoverClass: "ui-state-hover", 
        accept: ":not(.ui-sortable-helper)", 
        drop: function( event, ui ) { 
            $( this ).find( ".placeholder" ).remove(); 
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); 
        } 
    }).sortable({ 
        items: "li:not(.placeholder)", 
        sort: function() { 
            $( this ).removeClass( "ui-state-default" ); 
        } 
    }); 
}); 

Screenshots...

<小时 />

直到 5 个元素

<小时 />

拖动 5 个元素后

请您参考如下方法:

您可以将 jQuery 函数更改为:

$(function() { 
   $( "#catalog li" ).draggable({ 
       appendTo: "body", 
       helper: "clone" 
   }); 
   $( "#cart ol" ).droppable({ 
       activeClass: "ui-state-default", 
       hoverClass: "ui-state-hover", 
       accept: ":not(.ui-sortable-helper)", 
       drop: function( event, ui ) { 
           $( this ).find( ".placeholder" ).remove(); 
           $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); 
 
           if($('.ui-droppable li').length > 5) { 
               //bind your carousel here 
           } 
 
       } 
   }).sortable({ 
       items: "li:not(.placeholder)", 
       sort: function() { 
           $( this ).removeClass( "ui-state-default" ); 
       } 
   }); 
});