Question

我有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();
});

Answer 1

如果在＃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();
});

Answer 2

你可以设置＆＃34;收容＆＃34;选项只包括sortable2列表，如此。

$("#sortable1").sortable( 
   {   
      helper      : "clone", 
      connectWith : "#sortable2",
       containment: "#sortable2",
      .....
    });

JQuery UI可排序 - ConnectWith - 禁用一列

2 个答案: