Question

我有两个元素列表，并且我已经在它们两个上启用了jQuery UI可排序。我使用connectWith选项让我可以在两个列表之间拖动。

其中一个列表中包含很多元素，因此我添加了overflow-y: scroll。我使用自定义helper函数来允许我在拖动元素时滚动整个页面。

helper: function(event, element){
    // From: http://stackoverflow.com/a/8512783/206403
    return element.clone().appendTo('body');
}

如果顶部列表中没有元素，则很难将元素拖入其中。如果顶部列表中已有元素，则可以正常工作。

这是一个演示：http://jsfiddle.net/MCcuc/5/。向下滚动，并尝试将“项目Q”（从红色列表的底部）移动到绿色列表（尝试将元素移到绿色列表上，然后再次退出）。你会发现将它附加到绿色列表并不容易。

我认为它与我的helper功能有关。我怎样才能让它将第一个元素拖到绿色列表中？

Answer 1

我不确定它有什么帮助，但我发现“真正的”问题是在早期开始而不是在占位符消失时开始的。发生的情况是内部滚动条不会滚动，但在后台，光标的位置仍会触发“非活动”列表中的重新排序。因此，视觉上您的项目位于活动列表上方，但其位置仍然高于非活动列表的前2个元素。但是，由于视觉“过度”放置，占位符已位于“活动”列表中。因此，当该位置离开非活动列表的第一项的“虚拟位置”时，将删除占位符。不幸的是，此时它位于“活动”列表中，而不在非活动列表中。

所以我的意思是“问题早点开始”是占位符应保留在非活动列表中并使其向上滚动而不是过早地移动到活动列表，这可能是你想要的：首先使用然后列表的滚动条使用正文的滚动条。但是这意味着移动助手项目在它上面时是旧列表的子元素的要求，并且当它离开旧列表的区域时成为'body'的子元素。

我认为你不能这样做（使用这个插件）。

可能的情况：如果您不想在非活动列表中重新排列，而只是通过页面滚动将项目移动到活动列表。在这种情况下，您可以做的是使用'out'事件，当它被触发时向上滚动Inactive列表。不幸的是，似乎'out'事件不是第一次触发它。看起来像一个错误:(

...
appendTo: 'body',
helper: 'clone',
out: function() {$('#Inactive')[0].scrollTop = 0;},
...

更新：找到了解决方法。我没有抛光它（特殊情况：当占位符是列表中的第一个项目时），但这是个想法：

appendTo: 'body',
helper: 'clone',
placeholder: 'addBox',
change: function() {
    $('.addBox').prev()[0].scrollIntoView();
}

Answer 2

坦率地说，我建议从根本上改变你的UI，以消除滚动条的需要。

与滚动条的存在相关的可排序插件存在很多未解决的问题（请参阅#3173，#5881，#7033，#7065，{{3有些例子，}，#7351，#7546，#7581和#7784。开发团队目前没有优先考虑这些因为插件是#8039（这还有很长的路要走）。

即使您能够解决当前的问题（我确实尝试过......），我也有一种感觉，当您进入更彻底的跨浏览器时，您会感到非常悲伤测试。就个人而言，我也觉得从可用性的角度来看，使用滚动条的可排序元素很奇怪。

祝你好运。

Answer 3

如何将列表并排放置，这可以解决问题。 http://jsfiddle.net/MCcuc/18/

 <table>
      <tr>
       <td><div id="Active" class="sort">
          </div>
      </td>
      <td>
          <div id="Inactive" class="sort">
            <div class="box">
               <div class="handle"></div>
               <span>Item B</span>
            </div>
         </div>
       </td>
     </tr>
    </table>

当底部列表向下滚动时，溢出不可见，但仍影响顶部列表所在的空间。下面的列表不可见，当试图删除Q项时，由于溢出，它仍然被放在下面的列表中。

Answer 4

试试这个： http://jsfiddle.net/KaBB7/

主要思想是 - 您不需要将可排序列表与自身连接，因此只需单独初始化列表并相互连接。

jQuery UI Sortable：无法将第一个元素添加到链接元素

4 个答案: