HTML5 drag和drop具體使用詳解

發(fā)布時(shí)間：2021-01-18 11:47:50 作者：_清水

這篇文章主要介紹了HTML5 drag和drop具體使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

簡(jiǎn)介

拖拽（Drag/Drop）是一個(gè)很普遍、很常用的操作，即抓取一個(gè)對(duì)象后，放到想要放的地方。在H5中，拖拽是一個(gè)標(biāo)準(zhǔn)操作，任何元素都可以拖拽?。?但是?。?想要實(shí)現(xiàn)拖拽，需要添加拖拽屬性。

H5中拖拽屬性：draggable： auto | true | false

注意：鏈接和圖片默認(rèn)是可拖動(dòng)的，則不需要 draggable 屬性。

- Drag（在拖拽目標(biāo)時(shí)觸發(fā)事件）

dragstart - 元素開(kāi)始拖動(dòng)時(shí)觸發(fā)此事件
drag - 元素正在拖動(dòng)時(shí)觸發(fā)此事件
dragend - 元素拖動(dòng)結(jié)束后觸發(fā)此事件

- Drop（在目標(biāo)區(qū)域釋放時(shí)觸發(fā)事件）

dragenter - 當(dāng)被拖動(dòng)的元素進(jìn)入目標(biāo)區(qū)域內(nèi)時(shí)觸發(fā)此事件
dragover - 當(dāng)被拖動(dòng)的元素在目標(biāo)區(qū)域內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
dragleave - 當(dāng)被拖動(dòng)的元素離開(kāi)目標(biāo)區(qū)域時(shí)觸發(fā)此事件
drop - 當(dāng)被拖動(dòng)的元素在目標(biāo)區(qū)域被放下時(shí)觸發(fā)此事件

拖拽步驟

設(shè)置元素屬性draggable 為 true

  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">左邊區(qū)域</div>
      <div class="dargable txt" id="txt1" draggable="true">可移動(dòng)的文字一</div>
      <div class="dargable txt" id="txt2" draggable="true">可移動(dòng)的文字二</div>
      <div class="dargable txt" id="txt3" draggable="true">可移動(dòng)的文字三</div>
      <div class="dargable txt" id="txt4" draggable="true">可移動(dòng)的文字四</div>
      <div class="dargable txt" id="txt5" draggable="true">可移動(dòng)的文字五</div>
    </div>
    <div class="right" id="right">
      <div class="txt-show">右邊區(qū)域</div>
    </div>
  </main>

拖動(dòng)

dragstart 事件：在進(jìn)行拖放操作時(shí)，通過(guò)dataTransfer來(lái)實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)和獲取，每個(gè)event事件對(duì)象中都會(huì)有DataTransfer對(duì)象用來(lái)保存被拖動(dòng)的數(shù)據(jù)。它可以保存一項(xiàng)或多項(xiàng)數(shù)據(jù)、一種或者多種數(shù)據(jù)類型。

  let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart', (event) => {
    const target = event.target;
    // 在項(xiàng)目拖動(dòng)的開(kāi)始事件(ondragstart)的時(shí)候，可以對(duì)dataTransfer進(jìn)行設(shè)值操作(setData)。
    // 拖拽， dataTransfer 屬性， 等于運(yùn)輸車
    // 后續(xù)用 dataTransfer.getData獲取
    // 在項(xiàng)目拖動(dòng)結(jié)束的時(shí)，可以獲取dataTransfer對(duì)象里的值。
    event.dataTransfer.setData('Text', target.id)
    // js 事件有冒泡機(jī)制
    console.log('drag開(kāi)始拖動(dòng)啦1');
  })

drag事件：在拖拽過(guò)程中一直執(zhí)行

  left.addEventListener('drag', (event) => {
    console.log('drag正在拖啦2');
  })

dragend事件：結(jié)束

 left.addEventListener('dragend', (event) => {
    console.log('dragend拖動(dòng)結(jié)束啦7');
  })

放置

dragenter 和dragleave 事件：進(jìn)入或離開(kāi)目標(biāo)區(qū)域

  target.addEventListener('dragenter', (event) => {
    console.log('dragenter進(jìn)入?yún)^(qū)域啦3')
  })
    target.addEventListener('dragleave', (event) => {
    console.log('dragleave離開(kāi)拖動(dòng)區(qū)域啦5')
  })

dragover事件：默認(rèn)無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，就要阻止元素的默認(rèn)行為。

  target.addEventListener('dragover', (event) => {
    // 阻止默認(rèn)行為
    event.preventDefault();
    console.log('dragover在區(qū)域內(nèi)拖動(dòng)啦4')
  })

drop事件：放下

  target.addEventListener('drop', (event) => {
    console.log('drop釋放鼠標(biāo)啦6')
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main {
      display: flex;
      justify-content:space-around;
    }
    .left {
      width: 300px;
      height: 500px;
      border: 1px solid lightseagreen;
      margin-right: 10px;
      /* background-color: green; */
    }
    .right {
      width: 300px;
      height: 500px;
      border: 1px solid lightseagreen;
      text-align: center;
      padding: 1px;
      /* background: red; */
    }
    .txt {
      border: 1px solid gray;
      margin: 1px;
      padding: 5px;
      cursor: move;
    }
  </style>
</head>
<body>
  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">左邊區(qū)域</div>
      <div class="dargable txt" id="txt1" draggable="true">可移動(dòng)的文字一</div>
      <div class="dargable txt" id="txt2" draggable="true">可移動(dòng)的文字二</div>
      <div class="dargable txt" id="txt3" draggable="true">可移動(dòng)的文字三</div>
      <div class="dargable txt" id="txt4" draggable="true">可移動(dòng)的文字四</div>
      <div class="dargable txt" id="txt5" draggable="true">可移動(dòng)的文字五</div>
    </div>
    <div class="right" id="right">
      <div class="txt-show">右邊區(qū)域</div>
    </div>
  </main>
  <script>
  let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('Text', target.id)
    console.log('drag開(kāi)始拖動(dòng)啦1');
  })
  target.addEventListener('dragstart', (event) => {
    const target = event.target; 
    event.dataTransfer.setData('Text', target.id)
  })
  left.addEventListener('drag', (event) => {
    console.log('drag正在拖啦2');
  })
  left.addEventListener('dragend', (event) => {
    console.log('dragend拖動(dòng)結(jié)束啦7');
  })
  target.addEventListener('dragenter', (event) => {
    console.log('dragenter進(jìn)入?yún)^(qū)域啦3')
  })
  target.addEventListener('dragover', (event) => {
    event.preventDefault();
    console.log('dragover在區(qū)域內(nèi)拖動(dòng)啦4')
  })
  left.addEventListener('dragover', (event) => {
    event.preventDefault();
  })
  target.addEventListener('dragleave', (event) => {
    console.log('dragleave離開(kāi)拖動(dòng)區(qū)域啦5')
  })
  target.addEventListener('drop', (event) => {
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })
  left.addEventListener('drop', (event) => {
    let drag_id = event.dataTransfer.getData('text')
    left.appendChild(document.getElementById(drag_id))
  })
  </script>
</body>
</html>

小記

dragstart事件中通過(guò)dataTransfer來(lái)實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)和獲取，每個(gè)event事件對(duì)象中都會(huì)有DataTransfer對(duì)象用來(lái)保存被拖動(dòng)的數(shù)據(jù)。在項(xiàng)目拖動(dòng)的開(kāi)始事件(ondragstart)的時(shí)候，可以對(duì)dataTransfer進(jìn)行設(shè)值操作(setData)。event.dataTransfer.setData() 進(jìn)行設(shè)值，在拖動(dòng)結(jié)束后，可以通過(guò)event.dataTransfer.getData()獲取dataTransfer對(duì)象里的值。

瀏覽器默認(rèn)無(wú)法將數(shù)據(jù)/元素放置到其他元素中，如果需要設(shè)置允許放置，就要阻止元素的默認(rèn)行為。通過(guò)event.preventDefault()阻止。

可以通過(guò)添加css樣式進(jìn)行對(duì)拖拽效果的改變。例：dragSrc.classList.add('ds') 。使用classList在元素中添加，移除及切換 CSS 類，classList 屬性是只讀的，但可以使用 add() 和 remove() 方法修改它。

使用 appendChild() 方法移除元素到另外一個(gè)元素。

HTML Drag and Drop API

DataTransfer()

HTML DOM appendChild() 方法

HTML DOM addEventListener() 方法

到此這篇關(guān)于HTML5 drag和drop具體使用詳解的文章就介紹到這了,更多相關(guān)HTML5 drag和drop內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！