jQuery Draggable + Sortable-如何在两个可滚动列表之间拖放 [英] jQuery Draggable + Sortable - How to drag and drop between two scrollable lists
问题描述
我想有两个列表，可用项目和选定项目，通过拖放将可用项目分配给选定项目.我要求已选项目"必须是可排序的，而不是可用项目".挑战在于，两个列表都可能包含大量项目，因此需要可滚动.
I would like to have two lists, Available Items and Selected Items, whereby Available Items are assigned to Selected Items via drag and drop. I require the Selected Items to be sortable, but not the Available Items. The challenge is that both lists can potentially contain a significant number of items, and therefore need to be scrollable.
这是到目前为止我拥有的jQuery:
Here is the jQuery I have thus far:
<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>
但是，由于具有可滚动列表的要求，我无法使可拖动的行为优雅地工作(请参见
With the scrollable list requirement, however, I can't get the draggable behaviour to work elegantly (see the demo at http://pastehtml.com/view/1bsk6bt.html).
被拖动的项目一旦进入可用项目"列表，它将消失在可滚动框架的后面.我尝试了克隆助手，还尝试使用div，不同的溢出选项，关闭jQuery中的滚动选项，但无法使其正常工作.我确定外面有人完成了我打算在这里做的事情，并且可以节省一些时间吗? :)
Once the item being dragged enters the Available Items list, it disappears behind the scrollable frame. I've tried the clone helper, and also tried playing around with containing divs, different overflow options, turning off the scroll option in jQuery, but cannot get it to work properly. I'm sure someone out there has accomplished something like what I'm aiming to do here and can save me some time? :)
任何帮助将不胜感激！
推荐答案
哇！修复起来很有趣.
第一个问题，就是列表永远水平滚动，我修复了CSS中一些简单的溢出更改.我从您的.drag_column中删除了两个溢出属性，并放置了一个溢出:隐藏在.drag_container中.
The first problem, with the list scrolling forever horizontally, I fixed with some simple overflow changes in your CSS. I removed both of the overflow attributes from your .drag_column, and put an overflow: hidden in .drag_container.
.drag_container {
width: 1000px;
margin: 0 auto;
position: relative;
border: 1px solid black;
position: relative;
z-index: 1;
overflow: hidden;
}
.drag_column {
padding: 5px;
width: 490px;
height: 200px;
float: left;
position: relative;
}
不幸的是，当我这样做时，当您将可拖动对象从一个列表移动到另一个列表时，它会产生位置错误(它会向上射击，具体取决于您选择的列表项).为了解决这个问题，我在可拖动的创建函数中添加了"helper:clone"行.
Unfortunately, when I did that it created a position error when you moved your draggable from one list to another (it would shoot upwards, depending on which list item you chose). To fix this, I added the line "helper: clone" to your draggable creation function.
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container',
helper: 'clone'
});
再一次，这产生了不良效果.克隆帮助程序可以使原始列表永远不会删除任何项目.为了解决这个问题，我不得不手动创建一个删除旧项的函数.我所做的是，向您的可拖动对象添加了一个start:函数，该函数获取了对象ID并将其放入变量中.然后，我创建了#selected列表的可放置对象，并在其中创建了drop:函数.该放置函数只是在具有匹配ID的对象上执行slideUp(100).请注意，我在脚本启动时创建了一个变量-修复了IE中的一个错误.
Once again, this created an undesirable effect. The clone helper makes it so the original list never has items deleted. To fix this, I had to manually create a function that would delete the old item. What I did was I added a start: function to your draggable object, that grabbed the object id and put it in a variable. Then I created a droppable object of your #selected list, and made a drop: function there. That drop function simply does a slideUp(100) on the object with the matching id. Note that I have a variable creation at the initiation of the script - this fixes a bug in IE.
var dragged = null;
$(function() {
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container',
helper: 'clone',
start: function(ui, event) {
dragged = $(this).attr('id');
}
});
$( "#selected" ).droppable({
drop: function(event, ui) {
var ident = "#" + dragged;
$(ident).slideUp(100);
}
});
我在 http://pastehtml.com/view/1by9nfd.html 上发布了具有完整HTML的页面，您可以根据需要玩耍.希望这会有所帮助！
I posted a page with the full HTML at http://pastehtml.com/view/1by9nfd.html so you can play around if you want. Hope this helps!
这篇关于jQuery Draggable + Sortable-如何在两个可滚动列表之间拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
