HTML5 Drag & Drop Example

HTML5 Drag and Drop example without jQuery

by ti2005

HTML

<div id="src">
  <img draggable="true" id="banana" src="http://www.countryliving.com/cm/countryliving/images/grilled-banana-splits-3574-200.jpg" alt="banana" />
  <img draggable="true" id="apple" src="http://static.caloriecount.about.com/images/medium/whole-foods-market-apple-182809.jpg" alt="apple" />
  <img draggable="true" id="cherries" src="http://tutorialcenter.net/wp-content/uploads/2012/11/cherries200.jpg" alt="cherry" />
  <div id="target">
    <p id="message">Place here</p>
  </div>
</div>

CSS

#src>* {
  float: left;
}

#target,
#src>img {
  border: thin solid black;
  padding: 2px;
  margin: 4px;
}

#target {
  height: 81px;
  width: 81px;
  text-align: center;
  display: table;
}

#target>p {
  display: table-cell;
  vertical-align: middle;
}

#target>img {
  margin: 1px;
}

img.dragged {
  background-color: lightgrey;
}

JavaScript

var src = document.getElementById("src");
var target = document.getElementById("target");
var message = document.getElementById("message");

var draggedID;

target.ondragenter = handleDrag;
target.ondragover = handleDrag;

function handleDrag(e) {
  e.preventDefault();
}

target.ondrop = function(e) {
/*   var newElem = document.getElementById(draggedID).cloneNode(false);
  target.innerHTML = "";
  target.appendChild(newElem); */

  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
  e.preventDefault();
}

src.ondragstart = function(e) {
  draggedID = e.target.id;
  e.target.classList.add("dragged");
}

src.ondragend = function(e) {
  var elems = document.querySelectorAll(".dragged");
  for (var i = 0; i < elems.length; i++) {
    elems[i].classList.remove("dragged");
  }
}