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

Question

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

PS: I've tried a lot of possibilities like as below addresses

Revert a jQuery draggable object back to its original container on out event of droppable

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

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

Is there a way to revert the Jquery drag-drop draggable to its original position if it fails validation?

jQuery UI - Revert a jQuery draggable object back to its original?

图片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>

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

How to move Draggable objects between source area and target area with jQuery

javascript

jquery

jquery-ui

jquery-ui-draggable