jQuery draggable nested divs and dragging again

Question

EDIT: I have resolved one of the issues. I can now get the elements to be draggable after having been dragged. I just need to make the droppable elements (sp-dropabble) to be droppable once they have been dragged. Ifr I fix this before anyone comments I will post my answer.

I tried asking before but I was too vague I think.

I have an item which, when dragged becomes a div with two columns.

The idea is that you can drag such a div on the page and then drag a new div inside the first and so on.

That partly works but once it is dropped I can no longer drag and drop it again. It wont drop anywhere once it has been placed.

Also I am having trouble dragging in to nested divs. It will drag on to the existing example one I have on the page but not in to new divs or in to nested divs.

I have the following HTML: (The item with the text draggable in it and the "sp-menu-draggable" class is what becomes the div in the tempstring when dragged)

    <div class="Outer row">
    <div class="col-lg-2"></div>
    <div class="MainWrapper sp-droppable DocPreview col-md-9 col-lg-6">
        <div>
            <div class='row sp-draggable'>
                <div class='column sp-droppable col-md-6'></div>
                <div class='column sp-droppable col-md-6'></div>

            </div>

        </div>
    </div>
    <div class="NavBar sidebar-nav col-md-3 col-lg-2">
    <nav>
        <ul class="nav" role="menu">
            <li>
                <a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">bob</a>
                <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
                    <li class="sp-menu-draggable">draggable</li>
                    <li>bob blib</li>
                    <li>bob blab</li>
                </ul>
            </li>
            <li>blib</li>
            <li>blob</li>
        </ul>
    </nav>
</div>
    <div class="col-lg-2"></div>
</div>

The Javascript:

$(function () {
var tempString = "<div class='sp-draggable'>" +
                "<div class='row'>" +
                    "<div class='column sp-droppable drop-container col-md-6'></div>" +
                    "<div class='column sp-droppable col-md-6'></div>" +
                "</div>" +
            "</div>"

$(".sp-menu-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    helper: function () {
        return tempString
    },
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    containment: "#MainWrapper",

});

$(".sp-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    containment: "#MainWrapper"
});



$(".sp-droppable").droppable({
    accept:".sp-draggable",
    drop: function (event, ui) {
        $(this).append(ui.draggable);
    }
}).sortable();

});

So I have a tempString which is assigned to the menu item and is what drags and drops.

I have two draggable methods. One for the menu item which becomes the div and one for an existing (Or already dragged) div.

The CSS:

body {
    background-color:#ededed;
}

.Outer{

    white-space: nowrap;
    overflow: auto;
    display: table;
    width:100%;
}

.MainWrapper {
    background-color:#ffffff;
    width:21cm;
    min-height:29.7cm;
    padding:2cm;
    margin:1cm auto;
    border: 1px #d3d3d3;
    border-radius:5px;
    box-shadow:0 0 5px rgba(0, 0, 0, 0.1);
    display: table-cell;
}

.NavBar{

}

.sp-draggable{
    float:left;
    width:100%;
}

*, *::after, *::before {
    box-sizing: border-box;
}

.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after, .container-fluid::after, .container::after, .dl-horizontal dd::after, .form-horizontal .form-group::after, .modal-footer::after, .nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after, .pager::after, .panel-body::after, .row::after {
    clear: both;
}

.DocPreview .row {

    border: 1px solid #ddd;


    box-sizing: border-box;
    margin: 15px 0;
    padding: 25px 14px 0;
    position: relative;
}

.DocPreview .column {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px 0;
    padding: 39px 19px 24px;
    position: relative;
}

I have a fiddler of the code but I can't get the tempString to work in it so I am not sure how much help it will be. https://jsfiddle.net/7ptkqhy1/

Answer 1

Okay I have got it working. Thought I would share my answer in-case other people have the same problem.

$(function () {
$(".sp-menu-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    helper: function () {
        return tempString
    },
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    cursor: "move"

});

$(".sp-draggable").draggable({
    revert: "invalid",
    connectToSortable: ".sp-droppable",
    start: function (event, ui) {
        $(ui.helper).css("width", "100%").css("height", "auto");
    },
    cursor: "move"
});



$(".sp-droppable").droppable({
    greedy: true,
    accept: ".sp-draggable",
    drop: function (event, ui) {

        makeDroppable($(this), event, ui)
    }
}).sortable();

function makeDroppable($elem, event, ui) {
    $elem.append(ui.draggable);
    $(ui.draggable).draggable({
        revert: "invalid",
        connectToSortable: ".sp-droppable",
        start: function (event, ui) {
            $(ui.helper).css("width", "100%").css("height", "auto");
        },
        cursor: "move"
    });

    var target = $(event.target);
    var dropped = $(ui.draggable).appendTo(target);

    dropped.find(".sp-droppable").droppable({
        accept: ".sp-draggable",
        greedy: true,
        drop: function (event, ui) {
            makeDroppable($elem, event, ui);
        }
    }).sortable();
}


});