DRAG-DROP - Roll Your Own Drag Drop Content Builder

by bizamajig

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>
<div id="wrapper" class="col-xs-4 col-sm-3 col-md-2 content-module">
    <ol id="first" class="simple_with_animation vertical">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ol>
</div>
<div class="col-xs-5 col-sm-6 col-md-8">
    <div class="clearfix  content-builder">
        <ol class="simple_with_animation vertical"></ol>
    </div>
</div>

CSS

.content-module {
    background:#ccc;
}
.content-builder {
    background:#20ccfc;
    padding-bottom:20px;
}
.content-builder ol {
    min-height:100px;
}

JavaScript

var a;
var b;
var append;
var adjustment;
var containerTemp;
e();

function e() {
    $("ol.simple_with_animation").sortable({
        group: 'simple_with_animation',
        pullPlaceholder: false,
        // animation on drop

        afterMove: function ($placeholder, container, $closestItemOrContainer) {
            b.remove();
            a.appendTo(append);
            $("ol.simple_with_animation").sortable("destroy");
            e();
        },

        onDrop: function (item, targetContainer, _super) {
            var clonedItem = $('<li/>').css({
                height: 0
            });
            item.before(clonedItem);
            clonedItem.animate({
                'height': item.height()
            });

            item.animate(clonedItem.position(), function () {
                clonedItem.detach();
                _super(item);
            });
        },

        // set item relative to cursor position
        onDragStart: function ($item, container, _super) {
            a = $("#first").clone(true, true);
            b = $("#first");
            append = $("#wrapper");
            var offset = $item.offset(),
                pointer = container.rootGroup.pointer;

            adjustment = {
                left: pointer.left - offset.left,
                top: pointer.top - offset.top
            };

            _super($item, container);
        },
        onDrag: function ($item, position) {
            $item.css({
                left: position.left - adjustment.left,
                top: position.top - adjustment.top
            });
        }
    });
}