拖動基本實現

拖動相關事件：dragstart, drag, dragenter, dragleave, dragover, drop, dragend.

以下圖，將三個圓拖動到矩形裏面：

 

HTML結構：

<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>

CSS:

.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}

JS:

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);
}