jQuery UI：将可排序从Accordion拖到外部

我有两个连接的可排序列表。 一个是简单的页面，另一个是手风琴。 （我使用手风琴作为另一个列表的容器）

我的目标是让用户可以打开手风琴并将项目从该列表中拉出并放到页面上。

它有效 – 除了占位符在离开手风琴时消失。 我试过帮助：’克隆’并增加zIndex。

这是代码的简化版本：

    $(document).ready(function(){ $( "#inside" ).accordion({ collapsible: true, fillSpace: true, active: false }); $("#ulOutsideList, #ulInsideList").sortable({ opacity: 0.7, revert: 100, scroll: true, helper: 'clone', zIndex: 50000, connectWith: ".connectedSortable", }); });  
  
 
outside 1
 
outside 2
 
outside 3
 
 
  
 
 
container
 
 
inside 1
 
inside 2
 
inside 3
 
  

Answer 1

在您的可排序调用中，您希望使用以下选项：

helper：“clone”，appendTo：“body”，//或者你想要帮助克隆附加到的任何元素

这样做有两件事。 首先它创建被拖动元素的副本（辅助选项），然后它将该帮助器附加到指定元素（appendTo选项）。

类似的问题在这里： jQuery-Ui：不能将对象拖到手风琴之外，这里： jquery sortable不能被 拉到手风琴 之外

Answer 2

Edvn的回答对我有用，但是在排序完成后给每个元素留下一个style =“display：block”的副作用令人不快，这打破了我试图制作的布局。

另一种解决方案是覆盖.ui-accordion上的overflow：auto样式和溢出的.ui-accordion-content：inherit。 这可以防止在拖动时隐藏排序。 在我的情况下，这并没有导致手风琴的任何问题，但可能是造型是有原因的，所以YMMV。 FWIW我在Chrome和Firefox上测试过。

更新 ：使用此方法时还需要权衡。 溢出样式的改变可导致在展开片段时上部手风琴片段的内容出现在手风琴对象下方，并且在动画序列期间上段仍然关闭。 您可以通过仅设置oerflow来inheritance最小化影响：inheritance.ui-accordion和.ui-accordion-content实例，您需要对其进行排序。