console 命令行工具 X clear

console

var dragged;

document.addEventListener('dragstart',function(event){
    dragged = event.target
    event.target.style.opacity = 0.5
},false)

document.addEventListener('dragend',function(event){
    event.target.style.opacity = ''
},false)

document.addEventListener('dragover',function(event){
    event.preventDefault()
    event.dataTransfer.dropEffect = 'none'
},false)

document.addEventListener('dragenter',function(event){
    if(event.target.className === 'dropzone'){
        event.target.style.backgroundColor = 'purple'
    }
},false)

document.addEventListener('dragleave',function(event){
   if(event.target.className === 'dropzone'){
       event.target.style.backgroundColor = ''
   }
},false)

document.addEventListener('drop',function(event){
  event.preventDefault()
  if(event.target.className === 'dropzone'){
      event.target.style.backgroundColor = ''
      dragged.parentNode.removeChild(dragged)
      event.target.appendChild(dragged)
  }
},false)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="">
	<title></title>
</head>
<body>
	<!-- <button id="btn">点我</button>
    <input type="text" id="input"> -->
    <div class="dropzone">
    <div id="draggable" draggable="true">
        该节点可拖拉
    </div>
    </div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
</body>
</html>

.dropzone{
    width:100px;
    height:100px;
    border:1px solid #eee;
}