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

问题

How to move draggable objects between source area and target area??
For example:
(Picture 1) Original location
(Picture 2) and then move some items
(Picture 3) my question is how to move the item between source area and target area

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?

picture 1 picture 2 picture 3

All Codes

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

回答1:

You could treat them as connected sortable lists:

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

回答2:

I've tried anther way to cope this problem

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

来源：https://stackoverflow.com/questions/51682909/how-to-move-draggable-objects-between-source-area-and-target-area-with-jquery

标签

javascript

jquery

jquery-ui

jquery-ui-draggable