拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。

拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。

為了使元素可以拖放,將draggable設(shè)置為true

<div draggable="true"></div>

拖放的主要有如下事件：

• 在拖動目標(biāo)上觸發(fā)事件 (源元素):

  • ondragstart用戶開始拖動元素時觸發(fā)
  • ondrag - 元素正在拖動時觸發(fā)
  • ondragend - 用戶完成元素拖動后觸發(fā)

• 釋放目標(biāo)時觸發(fā)的事件:

  • ondragenter - 當(dāng)被鼠標(biāo)拖動的對象進(jìn)入其容器范圍內(nèi)時觸發(fā)此事件
  • ondragover - 當(dāng)某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件
  • ondragleave - 當(dāng)被鼠標(biāo)拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件
  • ondrop - 在一個拖動過程中，釋放鼠標(biāo)鍵時觸發(fā)此事件

注意： 在拖動元素時，每隔 350 毫秒會觸發(fā) ondrag 事件。

以下為元素拖放的一個例子，dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值,例子中類型為Text，值為元素的id。在拖動到元素內(nèi)部時，會使容器的邊框為綠色虛線框。同時監(jiān)聽了拖離容器時，去除邊框和被拖放元素。

• dragover
  dragover規(guī)定何處放置數(shù)據(jù)，默認(rèn)是不允許放置的，需要使用e.preventDefault來允許放置。
• drop
  drop的默認(rèn)行為是打開URL鏈接，因此要阻止默認(rèn)行為，避免默認(rèn)打開URL
  通過e.dataTransfer.getData來獲取之前setData設(shè)置的類型值。

.drag-container {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
}

.drag-container .input-text {
  text-align: center;
}

.input-text {
  margin-top: 30px;
}

#text {
  color: hotpink;
}

function addEventListener(el, type, callback) {
  if (el.addEventListener) {
    el.addEventListener(type, callback, false)
  } else if (el.attachEvent) {
    el.attachEvent('on' + type, callback)
  } else {
    el['on' + type] = callback
  }
}

window.onload = () => {
  const el = document.getElementById('dragtarget')
  const target = document.getElementById('drag-container')
  const text = document.getElementById('text')
  addEventListener(el, 'dragstart', (e) => {
    text.innerText = e.target.id + '開始移動'
    e.dataTransfer.setData('Text', e.target.id)
  })
  addEventListener(el, 'dragenter', (e) => {
    text.innerText = e.target.id + '進(jìn)入目標(biāo)'
  })
  addEventListener(target, 'dragover', (e) => {
    e.preventDefault()
    e.target.id === 'drag-container' && (e.target.style.border = '4px dotted green')
  })
  addEventListener(target, 'drop', (e) => {
    e.preventDefault()
    text.innerText = '拖動元素到' + e.target.id
    const data = e.dataTransfer.getData('Text')
    e.target.appendChild(document.getElementById(data))
  })

  addEventListener(target, 'dragleave', (e) => {
    e.target.className === 'drag-container' && (e.target.style.border = '')
    // 判斷相對元素，即當(dāng)前所處的容器父元素。（dragleave會觸發(fā)兩次）
    if (e.relatedTarget.nodeName.toLowerCase() === 'body') {
      const child = e.target.childNodes[0].cloneNode(true)
      e.target.removeChild(e.target.childNodes[0])
      document.body.insertBefore(child, text)
      text.innerText = '拖走元素內(nèi)的' + e.target.id
    }
  })
  addEventListener(el, 'dragend', (e) => {
    text.innerText = e.target.id + '拖放結(jié)束'
  })
}

<div id="drag-container" class="drag-container"></div>
<div id="dragtarget" class="input-text" draggable="true">學(xué)如逆水行舟，不進(jìn)則退</div>
<p id="text"></p>

使用場景

1. 當(dāng)需要生成自定義表單的時候，可以定義好一些通用組件，拖動到自定義表單的容器，實現(xiàn)自定義表單。
2. 網(wǎng)上商城的購物車功能。

瀏覽器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注意：在 Safari 5.1.2 中不支持拖放。