Question

我有一个问题需要你的建议，我有4个可排序的盒子。有三个小盒子连接一个大盒子。我可以将每个小盒子里的物品拖到大盒子里。我使用了jqueryui sortable。

问题是当我将项目从小盒子拖到大盒子里时，大盒子中的最后一项将向下移动我正在拖动的项目的空间，即使我在大盒子的底部或位置下方拖动它大盒子中的最后一项。

正如预期的那样，项目被拖动，这必须是大框中的最后一项。这是我需要你帮助的问题。我认为_contactContainers函数中的问题在于它计算位置并决定列表中的哪个项目将向下或向上移动以推送可排序的ui-sortable-placeholder或放置最新的项目。

我在我的例子中使用了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/

Jqueryui可排序connectWith多重排序占位符错误的位置

0 个答案: