我想要两个列表,可用项目和选定项目,其中可用项目通过拖放分配给选定项目。我要求所选项目是可排序的,但不是可用项目。挑战在于两个列表都可能包含大量项目,因此需要可滚动。
这是我到目前为止的 jQuery:
<script type="text/javascript">
$(function() {
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container'
});
$( "#selected" ).sortable({
axis: 'y',
placeholder: 'ui-state-highlight'
});
});
</script>
以及相应的 HTML:
<div class="drag_container">
<ul id="available" class="drag_column draggable">
<li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li>
<li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li>
<li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li>
<li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li>
<li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li>
<li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li>
<li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li>
<li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li>
</ul>
<ul id="selected" class="drag_column draggable sortable" style="margin-left: 20px;">
<li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li>
<li id="item8" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li>
<li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li>
<li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li>
<li id="item11" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 11</li>
<li id="item12" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 12</li>
<li id="item13" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 13</li>
<li id="item14" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 14</li>
<li id="item15" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 15</li>
<li id="item16" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 16</li>
<li id="item17" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 17</li>
<li id="item18" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 18</li>
</ul>
<div style="clear: both"> </div>
</div>
但是,对于可滚动列表要求,我无法让可拖动行为优雅地工作(请参阅http://pastehtml.com/view/1bsk6bt.html上的演示)。
一旦被拖动的项目进入“可用项目”列表,它就会消失在可滚动框架的后面。我已经尝试过克隆助手,还尝试过使用包含 div、不同的溢出选项、关闭 jQuery 中的滚动选项,但无法使其正常工作。我敢肯定那里有人已经完成了我打算在这里做的事情并且可以节省我一些时间?:)
任何帮助将不胜感激!