4

以下に示すように、2 つの UL リストがあります。#sortable1 から #sortable2 にクローンを作成できるようにしたいと考えていますが、問題は #sortable1 がそれ​​自体にドラッグアンドドロップできることです。これは望ましくありません。

#sortable1 は、項目を #sortable2 にドラッグして結果として複製することのみを許可する静的リストである必要があります。

前もって感謝します、

<ul id="sortable1">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2">
    <li class="ui-state-highlight">Item A</li>
    <li class="ui-state-highlight">Item B</li>
    <li class="ui-state-highlight">Item C</li>
    <li class="ui-state-highlight">Item D</li>
    <li class="ui-state-highlight">Item E</li>
</ul>

    $(function() 
    {
       $("#sortable1").sortable(
       {  
          helper      : "clone",
          connectWith : "#sortable2",
          start       : function(event,ui)
          {
             $(ui.item).show();
             clone    = $(ui.item).clone();
             before   = $(ui.item).prev();
             position = $(ui.item).index();
          },
          stop        : function(event, ui)
          {
             if (position == 0) $("#sortable1").prepend(clone);
             else before.after(clone);
          }
       });

      $("#sortable2").sortable();
});
4

2 に答える 2

3

＃sortable1の場合、beforeStopイベントを使用してドロップをキャンセルできます

$(function()
{
   $("#sortable1").sortable(
   {  
      helper      : "clone",
      connectWith : "#sortable2",
      start       : function(event,ui)
      {
         $(ui.item).show();
         clone    = $(ui.item).clone();
         before   = $(ui.item).prev();
         position = $(ui.item).index();
      },
      beforeStop  : function(event, ui)
       {
          if($(ui.item).closest('ul#sortable1').length>0)
          $(this).sortable('cancel');                                 
       },
      stop        : function(event, ui)
      {
         if (position == 0) $("#sortable1").prepend(clone);
         else before.after(clone);
      }
   });

  $("#sortable2").sortable();
});
于 2012-04-10T15:32:42.570 に答える
1

「containment」オプションを設定して、sortable2 リストのみを含めることができます。

$("#sortable1").sortable( 
   {   
      helper      : "clone", 
      connectWith : "#sortable2",
       containment: "#sortable2",
      .....
    });
于 2012-04-10T15:09:21.220 に答える