我有一个问题需要您的建议,我有4个可分类的框。三个小盒子与一个大盒子相连。我可以将每个小盒子中的项目拖到大盒子中。我使用了jqueryui可排序的。
问题是,当我将项目从小盒子中拖到大盒子中时,大盒子中的最后一个项目将向下移动我正在拖动的项目的空间,即使我将其拖动到大盒子的底部或低于大盒子中的最后一个项目。
正如预期的那样,该项目已被拖动,它必须是大框中的最后一个项目。这是问题,我需要您的帮助。我认为_contactContainers函数中的问题在于它计算位置并确定列表中的哪个项目将向下或向上移动以将ui-sortable-placeholder推入sortable或放置最新的项目。
在我的示例中,我使用了jquery-1.9.1.js,jquery-ui-1.10.3.custom.js。
这里是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test sortable</title>
<style>
ul
{
left: 50px;
list-style: none;
margin: 0;
position: absolute;
padding: 5px;
width: 300px;
}
ul li
{
border: 1px solid red;
line-height: 30px;
height: 30px;
margin-bottom: 5px;
position: relative;
text-align: center;
width: 300px;
}
.drag_container_1
{
border: 1px solid green;
top: 30px;
}
.drag_container_2
{
border: 1px solid blue;
top: 200px;
}
.drag_container_3
{
border: 1px solid yellow;
top: 370px;
}
.sortable
{
border: 1px solid brown;
left: 500px;
height: 450px;
top: 30px;
}
</style>
</head>
<body>
<ul class="drag_container drag_container_1">
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
<li>text 4</li>
</ul>
<ul class="drag_container drag_container_2">
<li>text 5</li>
<li>text 6</li>
<li>text 7</li>
<li>text 8</li>
</ul>
<ul class="drag_container drag_container_3">
<li>text 9</li>
<li>text 10</li>
<li>text 11</li>
<li>text 12</li>
</ul>
<ul class="zone sortable">
</ul>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="jquery.ui.sortable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind('ready', function () {
var dragContain = $('.drag_container'), sortable = $('.sortable');
dragContain.sortable({
revert: 10,
connectWith: ['.sortable', '.drag_container'],
}).disableSelection();
sortable.sortable({
revert: 10,
connectWith: '.drag_container'
}).disableSelection();
});
</script>
</body>
</html>
来自JsBin的新示例并获得错误:http://jsbin.com/aMIxUHi/1/edit
我尝试下载并使用jquery 1.9.2进行测试,但它没有按我预期的方式工作,例如http://jsfiddle.net/2rYqu/
有人解决了这个问题吗?我有同样的问题...