A Pen by Joe Watkins.

index.html

<h1>HTML5 Drag and Drop</h1>
<p>Rearrange the cats.</p>
<div class="drag-n-drop">

		<div class="item" draggable="true">
			<figure>
				<img src="http://placekitten.com/150/150" alt="Jim">
				<figcaption>Jim</figure>
			</figure>
		</div><!--// .items -->

		<div class="item" draggable="true">
			<figure>
				<img src="http://placekitten.com/250/250" alt="Bob">
				<figcaption>Bob</figure>
			</figure>
		</div><!--// .items -->

		<div class="item" draggable="true">
			<figure>
				<img src="http://placekitten.com/450/450" alt="Sally">
				<figcaption>Sally</figure>
			</figure>
		</div><!--// .items -->

	</div>

Native-browser-Drag-and-Drop.markdown

Native browser Drag and Drop

A Pen by Joe Watkins on CodePen.

License.

script.js

/* http://www.html5rocks.com/en/tutorials/dnd/basics */
function draganddrop(){

	var dragSrcEl = null;

	function handleDragStart(e) {
	  // Target (this) element is the source node.
	  this.style.opacity = '0.4';

	  dragSrcEl = this;

	  e.dataTransfer.effectAllowed = 'move';
	  e.dataTransfer.setData('text/html', this.innerHTML);
	}

	function handleDragOver(e) {
	  if (e.preventDefault) {
	    e.preventDefault(); // Necessary. Allows us to drop.
	  }

	  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

	  return false;
	}

	function handleDragEnter(e) {
	  // this / e.target is the current hover target.
	  this.classList.add('over');
	}

	function handleDragLeave(e) {
	  this.classList.remove('over');  // this / e.target is previous target element.
	}

	function handleDrop(e) {
	  // this/e.target is current target element.

	  if (e.stopPropagation) {
	    e.stopPropagation(); // Stops some browsers from redirecting.
	  }

	  // Don't do anything if dropping the same column we're dragging.
	  if (dragSrcEl != this) {
	    // Set the source column's HTML to the HTML of the column we dropped on.
	    dragSrcEl.innerHTML = this.innerHTML;
	    this.innerHTML = e.dataTransfer.getData('text/html');
	  }

	  handleDragEnd(e);

	  return false;
	}

	function handleDragEnd(e) {
	  // this/e.target is the source node.

	  console.log('ended');

	  [].forEach.call(items, function (item) {
	    item.classList.remove('over');
	    item.style.opacity = '1';
	  });
	}

	var items = document.querySelectorAll('.drag-n-drop .item');


	[].forEach.call(items, function(item) {
	  item.addEventListener('dragstart', handleDragStart, false);
	  item.addEventListener('dragenter', handleDragEnter, false)
	  item.addEventListener('dragover', handleDragOver, false);
	  item.addEventListener('dragleave', handleDragLeave, false);
	  item.addEventListener('drop', handleDrop, false);
	  item.addEventListener('dragend', handleDragEnd, false);
	});
  
}

if(Modernizr.draganddrop){
	draganddrop();
}

style.scss

@import "compass";
body {
	font-family:"Helvetica";
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

.drag-n-drop {
	width:100%;
	overflow:hidden;
	position:relative;
	.item {
		width:120px;
		display:block;
		cursor: move;
		float:left;
		margin:15px;
		border:solid 3px darken(#958361,10%);
		border-radius:10px;
		figure {
			width:100%;
			margin:0px;
			text-align: center;
			img {
				width:100%;
				border-top-left-radius:6px;
				border-top-right-radius:6px;
			}
			figcaption {
				background: #958361;
				color:#fff;
				margin: 0px;
				font-size: 16px;
				line-height: 3em;
				margin-top: -9px;
				height: 41px;
				border-bottom-right-radius:6px;
				border-bottom-left-radius:6px;
			}
		}
		&.over {
			border:dashed 3px #D87150;
		}
	}
}