HTML5 Fundamentals

<div id="source-container" data-role="drag-drop-target">
    <img id="home-snapshot" draggable="true" class="img-responsive" src="img/home.jpg">
</div>

<div id="target-container" data-role="drag-drop-target"></div>

[data-role="drag-drop-target"] {
  float: left;
  width: 500px;
  height: 376px;
  margin: 10px;
  padding: 10px;
  border: 3px solid #ddd;
  border-radius: 4px;
}
.over {
  background-color: #ffc;
}
[draggable="true"] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Support old versions of WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.drag {
  opacity: 0.25;
}

Basics

var dragStart = function(e) {
  // IE doesn't support text/plain
  try {
    e.dataTransfer.setData('text/plain', e.target.id);
  } catch (ex) {
    e.dataTransfer.setData('Text', e.target.id);
  }
};

var cancel = function(e) {
  if (e.preventDefault) e.preventDefault();
  if (e.stopPropagation) e.stopPropagation();
  return false;
};

var dropped = function(e) {
  var id;
  cancel(e);

  try {
    id = e.dataTransfer.getData('text/plain');
  } catch (ex) {
    id = e.dataTransfer.getData('Text');
  }

  e.target.appendChild(document.querySelector('#' + id));
};

var img = document.querySelector('#home-snapshot');
img.addEventListener('dragstart', dragStart, false);

var target = document.querySelector('#target-container');
target.addEventListener('drop', dropped, false);
target.addEventListener('dragenter', cancel, false);
target.addEventListener('dragover', cancel, false);

Basics (with role selectors)

var sourceContainerId;

var dragStart = function(e) {
  try {
    e.dataTransfer.setData('text/plain', e.target.id);
  } catch (ex) {
    e.dataTransfer.setData('Text', e.target.id);
  }
  sourceContainerId = this.parentElement.id;
};

var cancel = function(e) {
  if (e.preventDefault) e.preventDefault();
  if (e.stopPropagation) e.stopPropagation();
  return false;
};

var dropped = function(e) {
  var id;
  if (this.id !== sourceContainerId) {
    cancel(e);
    try {
      id = e.dataTransfer.getData('text/plain');
    } catch (ex) {
      id = e.dataTransfer.getData('Text');
    }
    e.target.appendChild(document.querySelector('#' + id));
  }
};
    
var targets = document.querySelectorAll('[data-role="drag-drop-target"]');
[].forEach.call(targets, function(target) {
  target.addEventListener('drop', dropped, false);
  target.addEventListener('dragenter', cancel, false);
  target.addEventListener('dragover', cancel, false);
});

var sources = document.querySelectorAll('[draggable="true"]');
[].forEach.call(sources, function(source) {
  source.addEventListener('dragstart', dragStart, false);
});

Events

var sourceContainerId;

var dragStart = function(e) {
  console.log('source: dragstart');

  try {
    e.dataTransfer.setData('text/plain', e.target.id);
  } catch (ex) {
    e.dataTransfer.setData('Text', e.target.id);
  }
  e.dataTransfer.effectAllowed = 'move';
  sourceContainerId = this.parentElement.id;
};

var cancel = function(e) {
  if (e.preventDefault) e.preventDefault();
  if (e.stopPropagation) e.stopPropagation();
  return false;
};

var dragEnd = function(e) {
  console.log('source: dragend');
};
    
var drag = function(e) {
  console.log('source: drag');
};

var dropped = function(e) {
  var id;
  
  console.log('target: drop');
  
  if (this.id !== sourceContainerId) {
    cancel(e);
    try {
      id = e.dataTransfer.getData('text/plain');
    } catch (ex) {
      id = e.dataTransfer.getData('Text');
    }
    e.target.appendChild(document.querySelector('#' + id));
  }
};

var dragEnter = function(e) {
  cancel(e);
  console.log('target: dragenter');
};

var dragOver = function(e) {
  cancel(e);
  console.log('target: dragover');
};
    
var dragLeave = function(e) {
  console.log('target: dragleave');
};
    
var targets = document.querySelectorAll('[data-role="drag-drop-target"]');
[].forEach.call(targets, function(target) {
  target.addEventListener('drop', dropped, false);
  target.addEventListener('dragenter', dragEnter, false);
  target.addEventListener('dragover', dragOver, false);
  target.addEventListener('dragleave', dragLeave, false);
});

var sources = document.querySelectorAll('[draggable="true"]');
[].forEach.call(sources, function(source) {
  source.addEventListener('dragstart', dragStart, false);
  source.addEventListener('drag', drag, false);
  source.addEventListener('dragend', dragEnd, false);
});