Question

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

我有一个带有订单的排序列表和一个多选下拉列表（http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/），它是从后面的代码填充的

每次选择一个项目时，我想动态添加一个droppable 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 希望这有帮助

动态拖放jquery

1 个答案: