jQuery UI可拖动而不滚动可排序容器 [英] Jquery UI draggable not scrolling the sortable container
问题描述
我有一些可拖动项(#draggable li)，我将它们拖放到可排序项(#sortable)中.
I have some draggable items(#draggable li) which i am dragging and dropping them in a sortable(#sortable).
sortable由两个div包裹，并且最外面的div具有溢出-y:滚动.拖放机制可以正常工作，直到可排序列表展开和滚动为止.
The sortable is wrapped by two divs and the outermost div has overflow-y: scroll. The mechanism of drag and drop works fine until the sortable list expands and scrolls.
当我尝试将项目直接拖放到可排序对象上时，我无法使可排序对象滚动条以我想使用的方式自动滚动(例如，要上移到第一个元素上方或下移到降到最后一个元素以下).但是，当我尝试在它们之间拖动并排序项目时，滚动条会在拖动时自动滚动.
When I try to drag and directly drop an Item on the sortable, i cannot get the sortable scrollbar to auto-scroll in the way I want to go(say want to go up to drop above the first element or go down to drop below the last element). But when I try to drag and sort the items among themselves the scroll bar auto-scrolls while dragging.
是错误还是我的代码工作方式有误.
Is it a bug or there is a fault the way my code works.
这是完整的代码:
<body>
<ul id="draggable" class="connectedSortable">
<li class="ui-state-default big">Item 1</li>
<li class="ui-state-default big">Item 2</li>
<li class="ui-state-default big">Item 3</li>
<li class="ui-state-default big">Item 4</li>
<li class="ui-state-default big">Item 5</li>
<li class="ui-state-default big">Item 6</li>
</ul>
<div id="outerDiv">
<div id="innerDiv">
<ul id="sortable" class="connectedSortable">
</ul>
</div>
</div>
</body>
//CSS
#sortable, #draggable {
list-style-type: none;
margin: 0;
padding: 0 0 2.5em;
margin-right: 10px;
}
#sortable li, #draggable li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.marker{
background: none repeat scroll 0 0 #DDDDDD;
border-bottom: 1px solid #BBBBBB;
border-top: 1px solid #BBBBBB;
display: block;
height: 20px;
width: 100%;
text-align: center;
vertical-align: middle;
color: #666;
font-size: 18px;
font-style: italic;
}
#outerDiv{
background: none repeat scroll 0 0 #EEEEEE;
height: 100%;
right: 0;
position: absolute;
overflow-y: scroll;
top: 0;
width: 300px;
}
#innerDiv{
border: 1px solid #CCCCCC;
min-height: 400px;
position:absolute;
}
#sortable{
width: 200px;
padding: 10px;
border : 1px solid black;
min-height: 230px;
}
#draggable{
position:absolute;
top:0;
left:0;
}
.big{
height: 80px;
}
//JS
$(function() {
$( "#sortable" ).sortable({
placeholder: "marker",
axis: "y",
});
$("#draggable li").draggable({
helper: "clone",
cursor: "move",
revert: "invalid",
revertDuration: 500,
connectToSortable: "#sortable"
});
});
小提琴上的演示 http://jsfiddle.net/8KDJK/21/
任何帮助将不胜感激.谢谢:)
Any help would be greatly appreciated. Thanks :)
推荐答案
我不确定这是一个错误，但不是经典情况.
I am not sure that it is a bug, but it is not in a classic scenario.
几个月前，我花了很多时间找到解决方法，这是我的解决方案: http://jsfiddle.net/8KDJK/23/
I spent a lot of time to find a workaround some months ago and here is my solution : http://jsfiddle.net/8KDJK/23/
现在可以正常工作几个月了.
It is working for months now without problem.
这个想法是在辅助构造回调期间将元素克隆添加到可滚动容器中，然后在1毫秒后使用setTimeout函数将辅助添加到正文中，以便能够在整个网页上拖动.
The idea is to append the element clone to the scrollable container durring the helper construction callback, then append the helper to the body using a setTimeout function after 1ms to be able to drag all around the web page.
$("#draggable li").draggable({
cursor: "move",
revert: "invalid",
revertDuration: 500,
connectToSortable: "#sortable",
//Here is the workaround
//**********************
containment: 'body',
helper: function(){
//Hack to append the element to the body (visible above others divs),
//but still bellonging to the scrollable container
$('#sortable').append('<div id="clone" class="ui-state-default big">' + $(this).html() + '</div>');
$("#clone").hide();
setTimeout(function(){
$('#clone').appendTo('body');
$("#clone").show();
},1);
return $("#clone");
}
});
链接到我之前的问题: JqueryUI，将元素拖到包含大表的滚动可拖放div的单元格中
Link to my previous question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table
这篇关于jQuery UI可拖动而不滚动可排序容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
