使用jquery拖放将项目传回列表

Question

以下是我将代码从左侧列表转移到右侧列表的代码。我没有问题就能做到这一点。如何将添加的列表项目返回到左侧列表。

<style>
        .ui-drop-hover {
            border: 2px solid #bbb;
        }

        #dragdiv {
            width: 180px;
            height: 200px;
            float: left;
        }

        #dropdiv {
            width: 280px;
            height: 150px;
            float: right;
            margin-right: 10px;
            background-color: #F9F887;
        }

            #dropdiv li {
                padding-left: 10px;
            }

        #maindiv {
            width: 580px;
            height: 300px;
            border: 2px solid #bbb;
        }
    </style>


    <script type="text/javascript">
        $(function () {
            $("#dragdiv li").draggable(
            {
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            });



            initDroppable($("#dropdiv"));
            function initDroppable($elements) {
                var cnt = 1;
                $elements.droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-drop-hover",
                    accept: ":not(.ui-sortable-helper)",

                    over: function (event, ui) {
                        var $this = $(this);
                    },
                    drop: function (event, ui) {
                        var $this = $(this);
                        $("<li id=" + cnt++ + "></li>").text(ui.draggable.text()).appendTo(this);
                        $("#allItems").find(":contains('" + ui.draggable.text() + "')")[0].remove();
                    }
                });
            }
        });
    </script>


    <h2>DragDrop</h2>


    <div class="container">
        <h1 class="page-header">Actions</h1>
        <div class="reset-password-container">
            <a href="#"></a>
            <div class="panel-wrapper">

                <div id="maindiv">
                    <div id="dragdiv">
                        <ul id="allItems">
                            <li id="node1">Item A</li>
                            <li id="node2">Item B</li>
                            <li id="node3">Item C</li>
                            <li id="node4">Item D</li>
                            <li id="node5">Item E</li>

                        </ul>
                    </div>

                    <div id="dropdiv">

                    </div>
                </div>
            </div>
        </div>

    </div>

您可以按原样复制代码并运行它。请帮助我如何将其添加回原始位置。