jQuery UI 可排序:无法将第一个元素添加到链接元素

jQuery UI Sortable: Cannot add first element to linked element

本文关键字：元素 第一个 添加 链接 UI 排序 jQuery      更新时间：2023-09-26

我有两个元素列表，我已经在这两个元素上启用了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功能有关。 如何让它让我将第一个元素拖到绿色列表中？

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

所以我所说的"问题开始得更早"的意思是占位符应该留在非活动列表中并使其向上滚动，而不是过早移动到活动列表，这可能是你想要的：首先使用列表的滚动条，然后使用正文的滚动条。但这意味着移动帮助程序项在它上方时需要成为旧列表的子元素，当它离开旧列表的区域时成为"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();
}

坦率地说，我建议从根本上更改您的 UI 以消除对滚动条的需求。

可排序插件存在许多与滚动条相关的未解决问题(有关一些示例，请参阅 #3173、#5881、#7033、#7065、#7351、#7546、#7581、#7784 和 #8039(。 开发团队目前没有优先考虑这些，因为该插件设置为在 2.0 中重写(这还有很长的路要走(。

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

祝你好运。

如何将列表并排放置，这样可以消除问题。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 项目时，由于溢出，它仍然被放在下面的列表中。

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

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

相关文章：