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

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/。向下滚动，并尝试将“Item Q”（从红色列表的底部）移动到绿色列表（尝试将元素移到绿色列表上，然后再次退出）。你会发现要让它附加到绿色列表中并不容易。

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

Answer 1

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

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

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

可能发生的情况：如果您不想在非活动列表中重新排列，而只想通过页面滚动将项目移动到活动列表。在这种情况下，您可以做的例如是使用“out”事件，当它被触发时，向上滚动非活动列表。不幸的是，“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、#7351、#7546、#7581 、#7784 和 #8039 举几个例子）。开发团队目前没有优先考虑这些，因为插件是set for a rewrite in 2.0（还有很长的路要走）。

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

祝你好运。

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/

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