HTML5原生拖放事件的學習與實踐

時間 2019-11-08

標籤 html5 html 原生拖放事件學習實踐欄目 HTML5 简体版

原文原文鏈接

前言

以前學習了HTML5的拖放事件，開發中也用到了拖拽組件。爲了釐清總體的邏輯，專門作了一個小例子。javascript

具體實現的效果也很簡單：元素能夠在容器中任意拖動，元素被移入容器的時候，還會有相關樣式的改變已達到更好的展現效果。css

例子基本運用了拖放事件的所有事件，而且儘可能簡潔的展現了出來。特此記錄。html

🔍閱讀更多系列文章 / 閱讀原文🔍前端

拖放事件介紹

由名字能夠看出來，拖放事件由2部分組成：拖動和釋放。html5

而拖動又由2部分組成，分別是被拖動元素的相關事件和元素容器的相關事件。java

一、被拖動元素的相關事件 ：node

事件名稱	說明
dragstart	在元素開始被拖動時候觸發
drag	在元素被拖動時反覆觸發
dragend	在拖動操做完成時觸發

二、容器的相關事件 ：webpack

事件名稱	說明
dragenter	當被拖動元素進入目的地元素所佔據的屏幕空間時觸發，通常須要取消瀏覽器的默認行爲。
dragover	當被拖動元素在目的地元素內時觸發，通常須要取消瀏覽器的默認行爲。
dragleave	當被拖動元素沒有放下就離開目的地元素時觸發

三、釋放事件 ：css3

事件名稱	說明
drop	當被拖動元素在目的地元素裏放下時觸發，通常須要取消瀏覽器的默認行爲。

效果展現

爲了方便說明，先看代碼實現的效果。請前往 Github倉庫下載 demo.html 和 demo.js 到本地，而後用Chrome打開html文件，初始效果以下圖：git

將圖中的可拖拽元素，拖放到下面的容器中，這個過程的效果以下所示。箭頭表示拖拽方向，方框表明動態改變的容器樣式。

最後，鬆開鼠標，將元素放入到下面的容器中，整個過程完成。

代碼實現

首先，先編寫html代碼。由於元素能夠在兩個容器之間任意拖動，所以這兩個容器都須要監聽drapenter、dragover、dragleave、drop這四個事件。

被拖拽元素的 draggable 屬性須要指明爲 true ，才能夠被拖拽。同時爲了記錄一些信息，須要監聽dragstart事件。

<body>
  <script src="./demo.js"></script>
  <div 
    class="container" 
    ondragenter="onDragEnter(event)" 
    ondragover="onDragOver(event)" 
    ondragleave="onDragLeave(event)" 
    ondrop="onDrop(event)"
  >
    <div id="target" draggable="true" ondragstart="onDragStart(event)">
      被拖拽元素
    </div>
  </div>
  <div
    class="container" 
    ondragenter="onDragEnter(event)" 
    ondragover="onDragOver(event)" 
    ondragleave="onDragLeave(event)" 
    ondrop="onDrop(event)"
  ></div>
</body>

爲了讓拖拽效果更明顯，實現效果展現->第二部分的，拖拽元素進入一個新的容器的時候，新容器展現陰影效果。編寫陰影效果樣式：

<style>
  .container {
    width: 200px; 
    height: 200px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    margin-bottom: 10px;
    transition: box-shadow .3s ease;
  }

  #target {
    width: 50px; 
    height: 50px;
    border: 1px solid black;
    margin: 0 auto;
  }

  .container.active {
    border-bottom-width: 0;
    box-shadow: 0 10px 6px -6px #777;
  }
</style>

最後，編寫 demo.js 代碼。具體邏輯請看代碼中的註釋信息：

let target = null,
  container = null

// 尋找拖拽元素的容器類
function findParentContainer(node) {
  if(!node || node === document) {
    return null
  }

  if(node.classList.contains('container')) {
    return node
  }

  return findParentContainer(node.parentNode)
}

// 元素開始被拖拽時, 標記元素原生的容器類
function onDragStart(event) {
  target = event.target
  container = findParentContainer(target)
}

// 元素進入目的容器時, 若是不是原來的容器, 則能夠放置
// 此時更改樣式, 以更好向用戶展現
function onDragEnter(event) {
  event.preventDefault()
  if(event.target !== container) {
    event.target.classList.add('active')
  }
}

// 元素在目的容器內時觸發
function onDragOver(event) {
  event.preventDefault()
}

// 元素離開目的容器, 須要移除相關樣式
function onDragLeave(event) {
  event.preventDefault()
  event.target.classList.remove('active')
}

// 元素被放置在目的容器, 添加DOM節點, 移除相關樣式
function onDrop(event) {
  event.preventDefault()
  event.target.appendChild(target)
  event.target.classList.remove('active')
  target = null
  container = null
}

HTML5原生拖放事件的學習與實踐

前言

拖放事件介紹

效果展現

代碼實現

參考連接

更多系列文章