5

jQuery UI Droppable Cart Demo プラグインを使用しています。ドロップ領域が 5 要素に達したら、カルーセルまたは矢印を作成したいと考えています。矢印をクリックすると、残りが表示されます。

フィドル

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

スクリーンショット...

5エレメントまで

ドロップ可能な領域に 5 つの要素

5 つの要素をドラッグした後

5 つの要素の後にカルーセルを作成する

4

1 に答える 1

2

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" );
       }
   });
});
于 2015-04-23T04:53:02.400 に答える