7cc/jsbin.emukaZo.css

## jsbin.emukaZo.css
[draggable=true]{
  position: absolute;
  top: 50px;
  cursor: move;
  box-shadow: 4px 0px 12px;
  padding: .25em .5em
}

## jsbin.emukaZo.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <label>copy<input type="radio" name="cursor" value="copy" checked></label>
  <label>move<input type="radio" name="cursor" value="move"></label>
  <label>link<input type="radio" name="cursor" value="link"></label>
  <label>none<input type="radio" name="cursor" value="none"></label>
  <!-- -->
  <div draggable="true" id="drag">draggable</div>
</body>
</html>

## jsbin.emukaZo.js
function getCursor() {
  var cursor = document.getElementsByName("cursor")
  for(var i=cursor.length; i--;){
    if ( cursor[i].checked) break
  }
  return cursor[i].value
}

function dragstart(event){
  if (event.target.draggable && event.target.tagName) {
    var dt = event.dataTransfer
    dt.setData("id", event.target.id); // text, text/palin だとロケーションバーにドロップでき、その文字で検索されてしまう
    dt.setData("application/x-moz-node", event.target); // 移動だけなら正直この2つは無くても良い。データの受け渡しはしないので
    dt.setData("text/html", event.target.innerHTML);
    dt.setData("clickPosY", event.clientY - event.target.getBoundingClientRect().top)
    dt.setData("clickPosX", event.clientX - event.target.getBoundingClientRect().left)
    dt.effectAllowed = getCursor()
    dt.dropEffect = getCursor()
  }
}
function dragover(event){
  //Firefoxでテキストがdropされないように、要素が選択されている時のみにする
  event.dataTransfer.getData("clickPosY") && event.preventDefault();
}
function drop(event){
  var id = event.dataTransfer.getData("id")
    , el = document.getElementById(id)
  el.style.top = event.pageY -  event.dataTransfer.getData("clickPosY") + "px"
  el.style.left = event.pageX - event.dataTransfer.getData("clickPosX") + "px"
}

document.getElementById("drag").addEventListener("dragstart", dragstart, false)
document.addEventListener("dragover", dragover, false)
document.addEventListener("drop", drop, false)
	[draggable=true]{
	position: absolute;
	top: 50px;
	cursor: move;
	box-shadow: 4px 0px 12px;
	padding: .25em .5em
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<label>copy<input type="radio" name="cursor" value="copy" checked></label>
	<label>move<input type="radio" name="cursor" value="move"></label>
	<label>link<input type="radio" name="cursor" value="link"></label>
	<label>none<input type="radio" name="cursor" value="none"></label>
	<!-- -->
	<div draggable="true" id="drag">draggable</div>
	</body>
	</html>
	function getCursor() {
	var cursor = document.getElementsByName("cursor")
	for(var i=cursor.length; i--;){
	if ( cursor[i].checked) break
	}
	return cursor[i].value
	}

	function dragstart(event){
	if (event.target.draggable && event.target.tagName) {
	var dt = event.dataTransfer
	dt.setData("id", event.target.id); // text, text/palin だとロケーションバーにドロップでき、その文字で検索されてしまう
	dt.setData("application/x-moz-node", event.target); // 移動だけなら正直この2つは無くても良い。データの受け渡しはしないので
	dt.setData("text/html", event.target.innerHTML);
	dt.setData("clickPosY", event.clientY - event.target.getBoundingClientRect().top)
	dt.setData("clickPosX", event.clientX - event.target.getBoundingClientRect().left)
	dt.effectAllowed = getCursor()
	dt.dropEffect = getCursor()
	}
	}
	function dragover(event){
	//Firefoxでテキストがdropされないように、要素が選択されている時のみにする
	event.dataTransfer.getData("clickPosY") && event.preventDefault();
	}
	function drop(event){
	var id = event.dataTransfer.getData("id")
	, el = document.getElementById(id)
	el.style.top = event.pageY - event.dataTransfer.getData("clickPosY") + "px"
	el.style.left = event.pageX - event.dataTransfer.getData("clickPosX") + "px"
	}

	document.getElementById("drag").addEventListener("dragstart", dragstart, false)
	document.addEventListener("dragover", dragover, false)
	document.addEventListener("drop", drop, false)