[Back To Basic] HTML5 - 拖放功能(drag and drop)

任何的元素(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));

}

source code