0

I have been trying to create a sortable, droppable nested list to use it as a way to dynamically create a webpage layout and I reached (with the great help of Google) a point where I can drag-drop divs inside or above/below others but i have a problem that might need a guru's help.

This is the code:

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

What this does, is allow the user to play move a div anywhere in the canvas they want. But whenever you drop it, it gets the right tree level but always ends up in the bottom (note .append()). Is there any way that I can get a hold of the index where it is dropped and put it right there (for example between two other divs)?

Code sample will be really appreciated.

Thank you for your time.

EDIT: To all those who flagged it as a Duplicate: My way needs to work with divs while the other question works with li

Michael M.
  • 63
  • 6
  • do you need to create the new element and remove the old? here is an example just using the sort and it behaves as expected, but i may be misunderstanding your requirements. http://jsfiddle.net/leighking2/mt6qqoLp/ – Quince Oct 06 '14 at 13:31
  • Hi and thanks for the quick reply. Actually this works when it comes to sorting but i cannot move divs inside other divs now. If you check my code, you can drag outter nodes inside another. – Michael M. Oct 08 '14 at 06:43
  • And by the way, who flagged my question as Duplicate? I need to contact that person and let him/her know that they need to pay attention to the question before flagging it as a duplicate. My way needs to work with divs while the other question works with li. It's not that i do not know to google or something. – Michael M. Oct 08 '14 at 07:39

0 Answers0