添加 5 个元素后创建轮播

Question

我正在使用 jQuery UI Droppable Cart Demo 插件，我想在 Dropped area 达到 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 个元素后

Answer 1

您可以将 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" );
       }
   });
});

添加 5 个元素后创建轮播

Create Carousel after 5 elements has been added

jquery

jquery-ui

jquery-droppable