HTML5原生拖放事宜的进修与实践

2019年9月1日 178次阅读来源: 心谭

媒介

之前进修了HTML5的拖放事宜，开辟中也用到了拖拽组件。为了厘清团体的逻辑，特地做了一个小例子。

详细完成的结果也很简单：元素能够在容器中恣意拖动，元素被移入容器的时刻，还会有相干款式的转变已达到更好的展现结果。

例子基础运用了拖放事宜的悉数事宜，而且只管简约的展现了出来。特此纪录。

🔍浏览更多系列文章 / 浏览原文🔍

拖放事宜引见

由名字能够看出来，拖放事宜由2部份构成：拖动和开释。

而拖动又由2部份构成，分别是被拖动元素的相干事宜和元素容器的相干事宜。

1、被拖动元素的相干事宜 ：

事宜称号	申明
dragstart	在元素最先被拖动时刻触发
drag	在元素被拖动时重复触发
dragend	在拖动操纵完成时触发

2、容器的相干事宜 ：

事宜称号	申明
dragenter	当被拖动元素进入目标地元素所占有的屏幕空间时触发，平常须要作废浏览器的默许行动。
dragover	当被拖动元素在目标地元素内时触发，平常须要作废浏览器的默许行动。
dragleave	当被拖动元素没有放下就脱离目标地元素时触发

3、开释事宜 ：

事宜称号	申明
drop	当被拖动元素在目标地元素里放下时触发，平常须要作废浏览器的默许行动。

结果展现

为了轻易申明，先看代码完成的结果。请前去 Github堆栈下载 demo.html 和 demo.js 到当地，然后用Chrome翻开html文件，初始结果以下图：

《HTML5原生拖放事宜的进修与实践》

将图中的可拖拽元素，拖放到下面的容器中，这个历程的结果以下所示。箭头示意拖拽方向，方框代表动态转变的容器款式。

《HTML5原生拖放事宜的进修与实践》

末了，松开鼠标，将元素放入到下面的容器中，全部历程完成。

《HTML5原生拖放事宜的进修与实践》

代码完成

起首，先编写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原生拖放事宜的进修与实践

媒介

拖放事宜引见

结果展现

代码完成

参考链接

更多系列文章