JQuery UI可排序 - ConnectWith - 禁用一列 [英] JQuery UI sortable - ConnectWith - Disable One Column

问题描述

我有2个UL列表，如下所示。我想要能够从＃sortable1克隆到＃sortable2现在可以工作，但问题是＃sortable1可以拖放到自己，我不想要的。

＃sortable1应该是一个静态列表，只允许将项目拖动到＃sortable2中，从而克隆。

提前感谢

 < ul id =sortable1> 
< li class =ui-state-default>项目1< / li> 
< li class =ui-state-default>项目2< / li> 
< li class =ui-state-default>项目3< / li> 
< li class =ui-state-default>项目4< / li> 
< li class =ui-state-default>项目5< / li> 
< / ul> 
 
< ul id =sortable2> 
< li class =ui-state-highlight>项目A< / li> 
< li class =ui-state-highlight>项目B< / li> 
< li class =ui-state-highlight>项目C< / li> 
< li class =ui-state-highlight>项目D< / li> 
< li class =ui-state-highlight>项目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（）; 
}）; 
  

解决方案

您可以使用beforeStop事件取消放弃on＃sortable1

  $（function（）
 {
 $（＃sortable1）可排序（
 {
 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（）; 
}）; 
  

I have 2 UL lists as show below. I would like to be able to clone from #sortable1 over into #sortable2 which now works, the problem however is that #sortable1 can drag and drop into itself, which I do not want.

#sortable1 should be a static list only allowing items to be dragged into #sortable2 and cloned as a result.

Thanks in advance,

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

解决方案

You can use the beforeStop event to cancel the dropping if on #sortable1

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

这篇关于JQuery UI可排序 - ConnectWith - 禁用一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！