jQuery可拖动+;可排序-如何在两个可滚动列表之间拖放
我想有两个列表,可用项和选定项,通过拖放将可用项分配给选定项。我要求所选项目可排序,但不要求可用项目。挑战在于两个列表都可能包含大量项目,因此需要可滚动 以下是我迄今为止的jQuery:jQuery可拖动+;可排序-如何在两个可滚动列表之间拖放,jquery,jquery-ui,jquery-ui-draggable,jquery-ui-sortable,Jquery,Jquery Ui,Jquery Ui Draggable,Jquery Ui Sortable,我想有两个列表,可用项和选定项,通过拖放将可用项分配给选定项。我要求所选项目可排序,但不要求可用项目。挑战在于两个列表都可能包含大量项目,因此需要可滚动 以下是我迄今为止的jQuery: <script type="text/javascript"> $(function() { $( "#available > li" ).draggable({ revert: 'invalid',
<script type="text/javascript">
$(function() {
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container'
});
$( "#selected" ).sortable({
axis: 'y',
placeholder: 'ui-state-highlight'
});
});
</script>
$(函数(){
$(“#available>li”).draggable({
还原:“无效”,
connectToSortable:“#已选定”,
安全壳:“#拖动容器”
});
$(“#选定”)。可排序({
轴:‘y’,
占位符:“ui状态突出显示”
});
});
以及相应的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>
第1项
第2项
第3项
第4项
第5项
第6项
第9项
第10项
第7项
第8项
第9项
第10项
第11项
第12项
第13项
第14项
第15项
第16项
第17项
第18项
然而,对于可滚动列表的要求,我无法使可拖动的行为优雅地工作(参见上的演示)
一旦被拖动的项目进入可用项目列表,它就会消失在可滚动的框架后面。我尝试过克隆助手,也尝试过使用包含div、不同的溢出选项,关闭jQuery中的滚动选项,但无法使其正常工作。我确信有人已经完成了我在这里的目标,可以为我节省一些时间
任何帮助都将不胜感激 呼!这是一个有趣的修复 第一个问题是,列表永远水平滚动,我用CSS中一些简单的溢出更改修复了这个问题。我从.drag\u列中删除了两个溢出属性,并在.drag\u容器中放置了一个溢出:hidden
.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”
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container',
helper: 'clone'
});
这又一次造成了不良影响。克隆帮助器使原始列表从不删除项目。为了解决这个问题,我必须手动创建一个函数来删除旧项。我所做的是在可拖动对象中添加一个start:函数,该函数获取对象id并将其放入变量中。然后,我为您的#selected list创建了一个可拖放对象,并在其中创建了drop:函数。该drop函数只是在具有匹配id的对象上执行slideUp(100)。请注意,我在脚本启动时创建了一个变量-这修复了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);
}
});
我在上贴了一个完整的HTML页面,所以你们可以随意玩。希望这有帮助 我需要这个功能,并且找到了一种方法来实现它 使用appendTo:“body”并在开始时设置绝对位置。被拖动的元素附加到主体上,并且总是其他元素的“顶部”,因为它的位置不在主体上
$( "#available > li" ).draggable({
revert: 'invalid',
appendTo: 'body',
helper: 'clone',
connectToSortable: '#selected',
containment: '#drag_container',
start: function( event, ui ){
$(ui.helper).css('position', 'absolute'); //helper if you are using clone
},
stop: function(event, ui){
$(ui.helper).css('position', 'relative'); // if you want
}
});
希望这有帮助那么为什么不显示滚动条?如果您的项目多于视图,则无法滚动查看它们。