Pure JavaScript Draggable

http://www.dte.web.id

by Rohith K P

HTML

<img draggable id="draggable-element" src="http://i.imgur.com/BDcvqmf.jpg">

CSS

body {
  padding: 10px
}

#draggable-element {
  width: 100px;
  height: 100px;
  background-color: #666;
  color: white;
  padding: 10px 12px;
  cursor: move;
  position: relative;
  /* important (all position that's not `static`) */
}

.face {
  animation: shake 1s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(4px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-5px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(5px, 0, 0);
  }
}

JavaScript

document.addEventListener("dragstart", function(e) {
  var img = document.createElement("img");
  img.src = "http://i.imgur.com/BDcvqmf.jpg";
  e.dataTransfer.setDragImage(img, 5000, 5000); //5000 will be out of the window
  drag(e)
}, false);

var crt, dragX, dragY;
//document.addEventListener('drag',drag)
function drag(ev) {
  crt = ev.target.cloneNode(true);
  console.log(crt)
  crt.className = "face";
  crt.style.position = "absolute";
  crt.style.opacity = "0.9";
  document.body.appendChild(crt);
  ev.dataTransfer.setData("text", ev.target.id);
}

document.addEventListener("dragover", function(ev) {
  ev = ev || window.event;
  dragX = ev.pageX;
  dragY = ev.pageY;
  crt.style.left = dragX + "px";
  crt.style.top = dragY + "px";
  console.log("X: " + dragX + " Y: " + dragY);
}, false);

document.addEventListener("dragend", function(event) {
  crt.style.display = 'none';
  crt.remove()
});