Question

我一直在尝试创建一个可排序的，可放置的嵌套列表，以便将其用作动态创建网页布局的方式，并且我（在谷歌的帮助下）达到了一个点，我可以在内部或上方拖放div /低于其他人，但我有一个问题可能需要大师的帮助。

这是代码：

    <style>
    body                                        { background: #efefef; } 

    #leftMenu                                   { height:500px; width:200px; float:left; background: #DEDEDE;}
    #canvas                                     { height:500px; width:1000px; float:left; background: #FFFFFF;}

    #canvas div                                 { border:2px dotted grey; min-height: 100px; margin:4px 4px 4px 4px; background: white;}
    #canvas div div                             { border:2px dotted grey; min-height: 100px; margin:16px 4px 4px 4px; background: white;}


    div.heading1                                { width: 100px; height: 30px; background: red; margin:5px; }
    #canvas div div.handler                     { margin:0px; border:0px; width: 50px; min-height: 15px; background:green; float: right; }

    div.dragged                                 { opacity: 0.4; }

    .node {
        border: 1px solid black;
        padding: 10px;
        margin: 5px;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">

    function bindNodes() {

        nodes = $(".node");
        nodes.sortable();
        nodes.droppable({
            greedy: true,
            drop: function (event, ui) {
                var dropped = ui.draggable;
                var droppedOn = $(this);

                droppedOn.append("<div id="NEWa1" class='node'>" + dropped.html() + "</div>");
                dropped.remove();
                bindNodes();
            }
        });
    }
    nodes = {};
    $(document).ready(function () {

        bindNodes();
    });

    </script>

<div id="content" style="height:500px;">    
    <div id="leftMenu">
        <div id="heading1" class="node">Heading</div>
    </div>
    <div id="canvas">
        <div class="node">
            <div id="a1" class="node">AAA</div>
            <div id="a2" class="node">BBB</div>
            <div id="a3" class="node">CCC</div>
            <div id="a4" class="node">DDD</div>
            <div id="a5" class="node">EEE</div>
            <div id="a6" class="node">FFF</div>
        </div>
    </div>
</div>
<div id="developer"></div>

这样做是允许用户在他们想要的画布中的任何地方播放div。但是每当你删除它时，它会得到正确的树级别，但总是在底部（注意.append（））。有没有什么方法可以让它被删除并放在那里的索引（例如在两个其他div之间）？

我们非常感谢代码示例。

感谢您的时间。

编辑：向所有将其标记为重复的人：我的方式需要使用div，而另一个问题适用于li

可排序，可放置的嵌套列表问题

0 个答案: