我有一些可拖动的项目(#draggable li),我正在将它们拖放到一个可排序的列表(#sortable)中。
这个可排序的列表被两个div包裹,最外层的div有overflow-y: scroll样式。在可排序的列表扩展并滚动时,拖放机制正常工作。
当我尝试直接将一个项目拖放到可排序的列表上时,我无法让可排序的滚动条自动滚动到我想要到达的位置(比如想要向上拖放到第一个元素之上或向下拖放到最后一个元素之下)。但是当我尝试在它们之间拖放和排序项目时,滚动条在拖放时会自动滚动。
是一个错误还是我的代码有问题?
以下是完整的代码:
这个可排序的列表被两个div包裹,最外层的div有overflow-y: scroll样式。在可排序的列表扩展并滚动时,拖放机制正常工作。
当我尝试直接将一个项目拖放到可排序的列表上时,我无法让可排序的滚动条自动滚动到我想要到达的位置(比如想要向上拖放到第一个元素之上或向下拖放到最后一个元素之下)。但是当我尝试在它们之间拖放和排序项目时,滚动条在拖放时会自动滚动。
是一个错误还是我的代码有问题?
以下是完整的代码:
<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"
});
});
这里有一个 Fiddle 的演示链接:http://jsfiddle.net/8KDJK/21/
如果需要帮助,请随时留言。谢谢 :)