0

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

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

正如预期的那样，该项目被拖动，它必须是大盒子中的最后一个项目。这是我需要你帮助的问题。我认为 _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/

4

0 回答 0