ES2015(es6)
js文档Node.jsVue.jsReactjQueryES2015(es6)angularjscss3动画vbs最新电影flutter微信小程序C教程java教程C++教程C#教程php教程sql教程mysql教程android教程ios教程python教程正则表达式

HTML5原生拖放事件的学习与实践

发布时间：2019-08-11 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了HTML5原生拖放事件的学习与实践，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。

具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。

例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。

????阅读更多系列文章 / 阅读原文????

拖放事件介绍

由名字可以看出来，拖放事件由2部分组成：拖动和释放。

而拖动又由2部分组成，分别是被拖动元素的相关事件和元素容器的相关事件。

1、被拖动元素的相关事件 ：

事件名称 说明
Dragstart 在元素开始被拖动时候触发
drag 在元素被拖动时反复触发
dragend 在拖动操作完成时触发

2、容器的相关事件 ：

事件名称 说明
dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发，一般需要取消浏览器的默认行为。
dragover 当被拖动元素在目的地元素内时触发，一般需要取消浏览器的默认行为。
dragleave 当被拖动元素没有放下就离开目的地元素时触发

3、释放事件 ：

事件名称 说明
drop 当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

效果展示

为了方便说明，先看代码实现的效果。请前往 Github仓库 下载 demo.htML 和 demo.js 到本地，然后用Chrome打开html文件，初始效果如下图：

HTML5原生拖放事件的学习与实践

@H_72_126@

将图中的可拖拽元素，拖放到下面的容器中，这个过程的效果如下所示。箭头表示拖拽方向，方框代表动态改变的容器样式。

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
}

参考链接

更多系列文章

⭐在GitHub上收藏/订阅⭐

《前端知识体系》

《设计模式手册》

《Webpack4渐进式教程》

⭐在GitHub上收藏/订阅⭐

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5原生拖放事件的学习与实践全部内容，希望文章能够帮你解决HTML5原生拖放事件的学习与实践所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：abstractabstractbuttonbuttonClassCSSCSScss3divdodocumentDOMes6eventeventflexflexfunctionfunctionfunctionHTMLhtml5html5ifimageimageininintjavaletnamenamenodenullnullparentpost-format-galleryreturnreturnreturnselectstaticstaticstatictexttexttoptoptrueundefinedundefined
猜你在找的ES2015(es6)相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新ES2015(es6)教程
热门ES2015(es6)教程