jQuery Drag in Drop - DOM Manipulation

http://stackoverflow.com/questions/20123587/jquery-draggable-droppable-and-sortable-at-the-same-time-for-dom-manipulation

by Francis Rodrigues

HTML

<div id="toolbox" style="margin: 10px;">
    <div data-section="toolbox" data-type="Container">drag me 1</div>
    <div >drag me 2</div>
</div>

<div class="main-form-container sortable">
    <div id="item-1"><div class="form-container sortable">Item 1</div></div>
    <div id="item-2"><div class="form-container sortable">Item 2</div></div>
    <div id="item-3"><div class="form-container sortable">Item 3</div></div>
</div>

CSS

html { width: 100%; height: 100%; }
#toolbox > div {
    display: inline; border:5px solid #999;
}
.form-container {
    margin:10px; padding: 10px;
    min-height: 34px;
    border: 3px dashed #999;
    border-radius: 5px;
    background-color: #efefef;
}
.form-container:hover {
    border: 3px dashed black !important;
}
.form-container:empty {
    border: 3px dashed #999;
    border-radius: 5px;
    vertical-align: middle;
    text-align: center;
    color: #999;
    font-size: 20px;
    background-color: #c2c2c2;
}
.main-form-container {
    border: 3px dashed;
    border-color: blue;
    height:100%;
    padding: 10px;
    border-radius: 5px;
}
.droppable-hovered {
    border-color: lightgreen !important;
}
.sortable-placeholder {
    margin:10px; padding: 10px;
    min-height: 34px;
    border: 3px dashed red;
    border-radius: 5px;
}
.sortable { overflow: visible; }

JavaScript

$('.main-form-container').sortable({
    placeholder: "sortable-placeholder",
    opacity: .35,
    zIndex: 9999,
    connectWith: ".sortable",
    stop: function (e, t) {
        if (t.item.attr('data-section') == "toolbox") {
            $(this).sortable("option", "revert", false);
            $(t.item).replaceWith(createContainer());
        } else {
            $(this).sortable("option", "revert", true);
        }
        /*$(".sortable").sortable({
            opacity: .35,
            placeholder: "sortable-placeholder",
            connectWith: ".sortable"
        }).disableSelection();*/
    }
}).disableSelection();

//init toolbox 
$('#toolbox div').draggable({
    connectToSortable: ".main-form-container",
    helper: function () {
        return createContainer();
    },
    revert: "invalid"
}).disableSelection();

var createContainer = function () {
    var id = Math.floor(Math.random() * 1000);
    var el = $('<div><div id="' + id + '" class="form-container sortable" style="background:url(http://dummyimage.com/100x34/e3e2eb/0011ff&text=' + id + '); background-repeat: repeat-x;background-size: auto 100%;"></div></div>');

    return el;
};