动态拖放jquery

Question

我正在尝试创建动态可放置容器，以便在它们之间移动排序列表。

我有一个包含订单的排序列表和一个从后面的代码填充的多选下拉列表 (http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/)

每次选择一个项目时，我都想动态添加一个可放置的 div，我可以通过从排序列表拖放到任何容器中，在该 div 中的可排序列表中、容器之间或返回到排序列表中来填充它列表。

我可以创建可放置的容器，但我无法从排序列表中将项目放入其中。

下面是我的代码

<script type="text/javascript">
    $(function () {
        $("select").multiselect({
            click: function (event, ui) {
                if (ui.checked) {
                    addGroup(ui.value)
                }
            }
        });
    });
</script>

<script type="text/javascript">
    function addGroup(container) {
        var x = $("<div class='dropcontainer' id='" + container + "'><p>GROUP #</p><ul class='sortable-list'></ul></div>");

        $("div#groups").append(x);
        x.droppable({
            activeClass: 'dragactive',
            hoverClass: 'drophover',
            drop: function (event, ui) {
            }
        });
    }
</script>
<script type="text/javascript">
    $('#groups .sortable-list').sortable({
        connectWith: '#groups .sortable-list'
    })

</script>
<script>
    $(function () {
        $("#sortable").sortable(({
    connectWith: '#groups .sortable-list'
})
</script>

<div class="bootstrap-frm">
    <div>
        <select id="ddlGroups" size="5" runat="server"></select>
    </div>
    <ul id="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>
    <div id="groups">
    </div>

</div>

编辑：

我已经修改了我的代码，因此在从下拉列表中选择时会创建一个新的动态可排序连接列表。但是我无法将任何内容拖到新创建的列表中。

http://jsfiddle.net/pwnxkme4/30/

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#sortable1, .sortable-list").sortable({
                connectWith: "#sortable2 .sortable-list"
            });
        });
    </script>
    <style>
                .left {
                    float: left;
                }

                .right {
                    float: right;
                } 
                #center-wrapper {
                    margin: 0 auto;
                    width: 920px;
                }               
                .column {
                    margin-left: 2%;
                    width: 400px;
                }

                    .column.first {
                        margin-left: 0;
                    }

                .sortable-list {
                    background-color: #F93;
                    list-style: none;
                    margin: 0;
                    min-height: 60px;
                    padding: 10px;
                }

                .sortable-item {
                    background-color: #FFF;
                    border: 1px solid #000;
                    cursor: move;
                    display: block;
                    font-weight: bold;
                    margin-bottom: 5px;
                    padding: 20px 0;
                    text-align: center;
                }            

                #containment {
                    background-color: #FFA;
                    height: 230px;
                }
                .placeholder {
                    background-color: #BFB;
                    border: 1px dashed #666;
                    height: 58px;
                    margin-bottom: 5px;
                }

                #topBar {
                    margin: 40px;
                    height: 50px;
                }
    </style>
</head>
<body>
    <script type="text/javascript">
        $(document.body).on('change', '#multi', function () {
            addSortableDiv($(this).val());
        });

        function addSortableDiv(item) {
            var x = $('<div class="column left" id="' + item + '"><ul class="sortable-list"><li class="sortable-item"></li></ul></div>');
            $("div#sortable2").append(x);
            x.droppable({
                drop: function (event, ui) {

                }
            });
        };
    </script>


    <div id="dragDropContainer">
        <div id="topBar">
            <select id="multi">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
                <option value="option4">Option 4</option>
                <option value="option5">Option 5</option>
                <option value="option6">Option 6</option>
                <option value="option7">Option 7</option>
                <option value="option8">Option 8</option>
                <option value="option9">Option 9</option>
                <option value="option10">Option 10</option>
            </select>
        </div>
        <div id="sortable1" style="width:400px;">

            <div class="column left first">

                <ul class="sortable-list">
                    <li class="sortable-item">Order A</li>
                    <li class="sortable-item">Order B</li>
                    <li class="sortable-item">Order C</li>
                    <li class="sortable-item">Order D</li>
                    <li class="sortable-item">Order E</li>
                </ul>

            </div>
        </div>
        <div id="sortable2">

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

Answer 1

我认为您将能够根据自己的需要进行调整，我对其进行了研究，因为它不是以前使用过的东西，这让我感兴趣，这就是我想出的。

$(function(){
    $(".dragMe").draggable(
        {
        revert : function(event, ui) {
            $(this).data("uiDraggable").originalPosition = {
                top : 0,
                left : 0
            };
            return (event !== false) ? false : true;
        }
    });
    $("#left, #right").droppable(
        {
        drop: function(ev, ui) {
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
        }
    });

    $("#multi").on("change", function(){
        var item = $(this).val();
        $("#right").append("<p>" + item + "</p>");
    });
});

它具有我认为你想要的功能。

这是JSFIDDLE 希望这会有所帮助