Question

我有两个相互连接的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个元素，分为两行。

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

由于

Answer 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>

滚动的JQuery Sortable

1 个答案: