2

我有两个元素列表，并且我已经启用了对它们都可排序的 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功能有关。我怎样才能让它让我将第一个元素拖到绿色列表中？

4

4 回答 4

2

我不确定它是否有帮助，但我发现“真正的”问题更早开始，而不是在占位符消失时开始。发生的情况是内部滚动条不滚动，但在后台，光标的位置仍会触发非活动列表中的重新排序。所以在视觉上你的项目在 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();
}
于 2012-05-23T17:08:37.867 回答
1

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

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

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

祝你好运。

于 2012-05-19T02:54:21.337 回答
1

将列表并排放置怎么样，这消除了问题。 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 项目时，由于溢出，它仍然被丢弃在下部列表中。

于 2012-05-23T14:57:35.573 回答
0

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

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

于 2012-05-23T09:39:47.220 回答