Draggable

by Aaron von Schassen

HTML

<div>
test
</div>
<div>
test
</div>
<div>
test
</div><div>
test
</div>
<div>
test
</div>

<div class="object" style="background: test;">
</div>
<div class="object" style="background: test;">
</div>

CSS

.object {
  width: 200px;
  height: 200px;
  background: black;
  margin-bottom: 20px;
}

.clone {
  pointer-events: none;
}

.placeholder {
  background: blue;
  min-height: 100px;
  display: none;
}

.dragged {
  pointer-events: none;
}

JavaScript

(function ($) {
    $.fn.getHTML = function () {
        return jQuery('<div />').append(this.eq(0).clone()).html();
    };
    $.fn.drag = function () {
        $(".object").after("<div class='placeholder'></div>");
        $(document).on('mousedown', '.object', function () {            
            var hoverlem;
            var hover = null;
            var getstyle = $(this).attr('style');
            var elem = $(this);
            var xelemKoor = event.pageX - elem.offset().left;
            var YelemKoor = event.pageY - elem.offset().top;
            var code = $(elem.getHTML()).addClass("clone");

            elem.addClass("dragged");
            $(".placeholder").css("display", "block");
            elem.before(code);
            elem.css({background: 'yellow', position: 'absolute'});
            elem.css({left: event.pageX - xelemKoor + "px", top: event.pageY - YelemKoor + "px"});
            //$("html, body").scrollTop($("html, body").scrollTop() + $placeholder.height());
            //$(window).mousemove();

            $(document).on("mousemove", function () {
                elem.css({left: event.pageX - xelemKoor + "px", top: event.pageY - YelemKoor + "px"});
                return false;
            });

            $(document).off('mouseover').on('mouseover', '.placeholder', function () {
                hoverlem = $(this);
                hover = 'yes';
                $(this).off('mouseleave').on('mouseleave', function () {
                    hover = 'null';
                });
                return hover;
            });

            $(document).off('mouseup').on('mouseup', function () {
                if (hover === 'yes') {
                    $(".clone").remove();
                    elem.remove();
                    $(document).off("mousemove");
                    $(document).off("mouseup");
                    $(".placeholder").css("display", "none");
                    hoverlem.after(elem.getHTML());
                   ...