滚动的 JQuery Sortable答案

【问题标题】：JQuery Sortable that scrolls滚动的 JQuery Sortable
【发布时间】：2010-02-09 17:19:51
【问题描述】：

我有两个相互连接的 jquery sortables（代码如下）。

$('#da_favourites_sortable').sortable({
    connectWith:  '#da_available_sortable',
    handle:   'img.da_icon_handle',
    revert:  true
});

$('#da_available_sortable').sortable({
    connectWith:  '#da_favourites_sortable',
    handle:   'img.da_icon_handle',
    revert:  true
});

我想做的是让其中一个成为滚动面板 (#da_available_sortable)，这样我就可以拥有多个可在面板之间移动的可排序元素“页面”。

我似乎无法找到这样做，这不会导致我不得不将“可用”面板拆分为多个 li。当我想将元素拖到可排序的“多页”中时，这显然不起作用，因为每个 li 最终都必须是单独的可排序。

我希望 #da_available_sortable 可排序一次将 10 个元素显示为两行，每行五个。

之前有没有人做过这件事可以告诉我前进的方向？

谢谢

【问题讨论】：

标签： jquery slider jquery-ui-sortable

【解决方案1】：

很难理解您想要实现的目标。你在寻找这样的东西吗？

http://jsbin.com/ekinog/8

在头上：

<style>
  #wrapper {
    border:solid 1px #cacaca;
    height:5em;
    overflow-y:scroll;
  }
 </style>
<script type="text/javascript">
$(function(){    

$('#da_favourites_sortable').sortable({
    connectWith:  '#da_available_sortable',
    revert:  true
});

$('#da_available_sortable').sortable({
    connectWith:  '#da_favourites_sortable',
    revert:  true
});   


});
</script>

在正文中：

<ul id="da_favourites_sortable">
    <li>Lorem</li>
    <li>Ipsum</li>        
  </ul>     

  <div id="wrapper">
    <ul id="da_available_sortable">
     <li>Dolor</li>
     <li>Sit</li>
     <li>Amet</li>
     <li>Consectetur</li>
     <li>Adipiscing</li>
     <li>Elit</li>
  </ul>
</div>

【讨论】：