任何的元素(elements)皆可以拖拉。
Step1 讓元素可被拖動
加入屬性(attributes): draggable="true"
e.g.
<div draggable="true"></div>
Step2 定義"拖"(drag)事件
哪個元素(elements)可以被拖動(drag)，定義被拖動時會發生什麼樣的事情，加入以下程式碼:
<img id="draggableImage" src="fox.jpg" alt="The fox" draggable="true" ondragstart="drag(event)">
function drag(event) {
// 將id暫存起來
event.dataTransfer.setData('draggable-item-id', event.target.id);
}
Step3 定義可以被"放"(drop)的元素或位置
Step3-1 event.preventDefault()
預設所有的元素(elements)不能被放在其他的元素(elements)中，為了要允許允許"放"(drop)這件事情，必須把預設的處理事件停止掉，加入以下程式碼:
<div ondragover="allowDrop(event)"></div>
function allowDrop(event) {
event.preventDefault()
}
Step3-2 定義"放"(drop)事件
哪個元素(elements)可以被放置(drop)，加入以下程式碼:
<div ondrop="drop(event)"></div>
function drop(event) {
// 藉由id取出element後附加上去
var id = event.dataTransfer.getData("draggable-item-id");
event.target.appendChild(document.getElementById(id));
}
