前言之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。????阅读更多系列文章 / 阅读原文????拖放事件介绍由名字可以看出来，拖放事件由2部分组成：拖动和释放。而拖动又由2部分组成，分别是被拖动元素的相关事件和元素容器的相关事件。1、被拖动元素的相关事件 ：事件名称说明dragstart在元素开始被拖动时候触发drag在元素被拖动时反复触发dragend在拖动操作完成时触发2、容器的相关事件 ：事件名称说明dragenter当被拖动元素进入目的地元素所占据的屏幕空间时触发，一般需要取消浏览器的默认行为。dragover当被拖动元素在目的地元素内时触发，一般需要取消浏览器的默认行为。dragleave当被拖动元素没有放下就离开目的地元素时触发3、释放事件 ：事件名称说明drop当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。效果展示为了方便说明，先看代码实现的效果。请前往 Github仓库 下载 demo.html 和 demo.js 到本地，然后用Chrome打开html文件，初始效果如下图：将图中的可拖拽元素，拖放到下面的容器中，这个过程的效果如下所示。箭头表示拖拽方向，方框代表动态改变的容器样式。最后，松开鼠标，将元素放入到下面的容器中，整个过程完成。代码实现首先，先编写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}参考链接代码地址: Github 《HTML5拖放》 《HTML5原生拖拽/拖放》 更多系列文章⭐在GitHub上收藏/订阅⭐《前端知识体系》JavaScript基础知识梳理(上)JavaScript基础知识梳理(下)ES6重难点整理谈谈promise/async/await的执行顺序与V8引擎的BUG前端面试中常考的源码实现Flex上手与实战……《设计模式手册》单例模式策略模式代理模式迭代器模式订阅-发布模式桥接模式备忘录模式模板模式抽象工厂模式……《Webpack4渐进式教程》webpack4 系列教程(二): 编译 ES6webpack4 系列教程(三): 多页面解决方案–提取公共代码webpack4 系列教程(四): 单页面解决方案–代码分割和懒加载webpack4 系列教程(五): 处理 CSSwebpack4 系列教程(八): JS Tree Shakingwebpack4 系列教程(十二)：处理第三方 JavaScript 库webpack4 系列教程(十五)：开发模式与 webpack-dev-server……⭐在GitHub上收藏/订阅⭐