Draggable

by basti1012

HTML

<div class="bla">

</div>

CSS

div {
  width: 200px;
  height: 200px;
  background: black;
}

.clone {
  pointer-events: none;
}

JavaScript

$(".bla").mousedown(function () {
    var elem = $(".bla");
    var xelemKoor = event.pageX - elem.offset().left;
    var YelemKoor = event.pageY - elem.offset().top;

    $("body").prepend("<div class='clone'></div>");
    elem.css({background: 'yellow', position: 'absolute', top: 0});
    elem.css({left: event.pageX - xelemKoor + "px", top: event.pageY - YelemKoor + "px"});

    $(document).bind('mousemove', function () {
      var xKoor = event.pageX;
      var YKoor = event.pageY;       

      elem.css({left: xKoor - xelemKoor + "px", top: YKoor - YelemKoor + "px"});

    });

    $('body,.clone,.bla').bind('mouseup', function () {
      elem.css("background", "red");
      elem.unbind("mousemove");
     $(".clone").remove();
      elem.removeAttr("style");
    });
 
  

 
  });