如何使用jQuery在源区域和目标区域之间移动可拖动对象

Question

如何在源区域和目标区域之间移动可拖动对象？
例如：
（图1）原始位置
（图2），然后移动一些项目
（图3）我的问题是如何在源区域和目标区域之间移动项目

PS：我尝试了很多可能性，例如以下地址

1. 在发生droppable事件时，将jQuery可拖动对象恢复为其原始容器

2. http://devilmaycode.altervista.org/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of-d/

3. http://api.jqueryui.com/draggable/#event-stop

4. 如果无法通过验证，是否有办法将Jquery拖放的可拖动对象恢复为其原始位置？
5. jQuery UI-将jQuery可拖动对象还原为其原始对象？

图片1 图片2 图片3

所有代码

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            margin-bottom: 10px;
        }

            div ul li {
                margin: 5px;
                padding: 5px;
                width: 150px;
            }
    </style>
    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <table>
        <tr>
            <td>
                <div>
                    <ul id="a">
                        <li id=""></li>
                        <li id="a1" class="ui-state-highlight">A</li>
                        <li id="a2" class="ui-state-highlight">D</li>
                    </ul>
                </div>
            </td>
            <td>
                <div>
                    <ul id="b">
                        <li class="ui-state-default" id="b1">Item 1</li>
                        <li class="ui-state-default" id="b2">Item 2</li>
                        <li class="ui-state-default" id="b3">Item 3</li>

                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <ul id="c">
                        <li id=""></li>
                        <li id="c1" class="ui-state-highlight">A1</li>
                        <li id="c2" class="ui-state-highlight">D1</li>
                    </ul>
                </div>
            </td>
            <td>
                <div>
                    <ul id="d">
                        <li class="ui-state-default" id="d1">Item 11</li>
                        <li class="ui-state-default" id="d2">Item 21</li>
                        <li class="ui-state-default" id="d3">Item 31</li>

                    </ul>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

<script>
    $("#a1,#a2").draggable({
        connectToSortable: "#b",
        revert: 'invalid',
    });
    $("#b").sortable({
        revert: true,
    });
    $("#c1,#c2").draggable({
        connectToSortable: "#d",
        revert: 'invalid',
    });
    $("#d").sortable({
        revert: true,
    });
</script>

Answer 1

您可以将它们视为已连接的可排序列表：

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            margin-bottom: 10px;
        }

            div ul li {
                margin: 5px;
                padding: 5px;
                width: 150px;
            }
    </style>
    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
    <table>
        <tr>
            <td>
                <div>
                    <ul id="a">
                        <li class="ui-state-highlight" id="a1">Item A1</li>
                        <li class="ui-state-highlight" id="a2">Item A2</li>
                    </ul>
                </div>
            </td>
            <td>
                <div>
                    <ul id="b">
                        <li class="ui-state-default" id="b1">Item B1</li>
                        <li class="ui-state-default" id="b2">Item B2</li>
                        <li class="ui-state-default" id="b3">Item B3</li>

                    </ul>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

<script>
    $("#a").sortable({
        revert: true,
        connectWith: "#b"
    });
    $("#b").sortable({
        revert: true,
        connectWith: "#a"
    });
</script>

Answer 2

我尝试了另一种方法来解决这个问题

<script>

  $("#a1,#a2").draggable({ connectToSortable: "#b,#a", revert: 'invalid', }); $("#a").sortable({ revert: true, }); 

    $("#b").sortable({
        revert: true,
    });
    $("#c1,#c2").draggable({
        connectToSortable: "#d",
        revert: 'invalid',
    });
    $("#d").sortable({
        revert: true,
    });
</script>