<div class="row">    <div class="span-6 dragTarg"></div></div><div class="row">    <div class="span-6 dragItems">        <div draggable="true" class="red"></div>        <div draggable="true" class="blue"></div>        <div draggable="true" class="green"></div>    </div></div>

.row{  margin: 10px;}.row .dragTarg{  width: 100px;  height: 40px;  background-color: #ccc;}.dragTarg div,.dragItems div{  width: 30px;  height: 30px;  border-radius: 15px;  display: inline-block;}.red{background-color: #f00}.blue{background-color: #00f}
.green{background-color: #0f0}

var circles = document.querySelectorAll(‘.dragItems div‘);for(var i=0;i<circles.length;i++){  var circle = circles[i];  circle.addEventListener(‘dragstart‘,onDragStart,false);  circle.addEventListener(‘dragend‘,onDragEnd,false);}function onDragStart(e){  this.style.border = ‘5px solid #000‘;　//拖动某个圆形时，保存其样式名(或者id)，以便后面能通过样式名找到。  e.dataTransfer.setData(‘text‘,this.className);}function onDragEnd(e){  this.style.border = ‘none‘;}var dragTarg = document.querySelector(‘.dragTarg‘);dragTarg.addEventListener(‘dragenter‘, onDragEnter);function onDragEnter(e){  this.style.border = ‘3px #aaa dashed‘;}dragTarg.addEventListener(‘dragover‘, onDragOver);function onDragOver(e){  　//只有阻止了dragover的默认行为，才会有drop事件发送出来。　　//否则无法监听到drop事件。　　e.preventDefault();}dragTarg.addEventListener(‘drop‘,onDrop,false);function onDrop(e){  //e.preventDefault();    var className = e.dataTransfer.getData(‘text‘);　//根据保存的样式名，找到拖动的圆形  var ele = document.querySelector(‘.dragItems .‘+className);　//将其添加到矩形中，即原来的圆被移走。  this.appendChild(ele);}