走进HTML5-带你学习拖拽知识

321 阅读3分钟

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

拖放(drag && drop)在我们平时的工作中,经常遇到。它表示我们日常的抓取和拖放到另一个位置的过程。常用于各种拖动操作中

创建元素

首先我们需要创建可拖动元素

<div id="drag" draggable="true"></div>

拖拽相关的事件

在元素进行拖拽中会触发各种事件,

  • 被拖拽元素拖拽开始时,会触发dragstart事件
  • 被拖拽元素拖拽完成时,会触发dragend事件
  • 当被拖拽元素进入到目标元素时时,会触发dragenter事件
  • 被拖拽元素在目标元素上移动时,会触发dragover事件
  • 被拖拽元素在目标元素上同时鼠标放开时,会触发drop事件
    • 需要阻止 dragover 的默认行为才会触发 drop 事件

DragEvent 事件对象

  • 传值
    • e.dataTransfer.setData('name',e.target.id)
  • 取值
    • e.dataTransfer.getData('name')

代码示例

<style>
  .drop{
    width: 100px;
    height: 100px;
    background-color: #8c38f2;
    margin-bottom: 50px;
  }
  .target{
    width: 200px;
    height: 200px;
    background-color: rgb(128, 131, 128)
  }
</style>

<p class="info">这里显示开始和结束信息</p>
<p class="going">这里显示正在进行的信息</p>

<div class="drop" draggable="true">我是可以拖动的元素</div>
<div class="target">我是目标元素</div>
  
<script>
  const drop = document.querySelector('.drop')
  const target = document.querySelector('.target')
  const info = document.querySelector('.info')
  const going = document.querySelector('.going')

  drop.addEventListener('dragstart',function (e) {
    // 传值
    e.dataTransfer.setData('name','这是我给你传的值')
    info.innerHTML = '被拖拽元素开始拖动'
  })

  drop.addEventListener('dragend',function () {
    info.innerHTML = '被拖拽元素拖动完成'
    console.log('被拖拽元素拖动完成');
  })

  drop.addEventListener('drag',function () {
    going.innerHTML = '被拖拽元素正在被拖动'
  })

  target.addEventListener('dragenter',function () {
    info.innerHTML = '被拖拽元素进入目标元素'
  })

  target.addEventListener('dragover',function (e) {
    going.innerHTML = '被拖拽元素在目标元素上移动'
    e.preventDefault()
  })

  target.addEventListener('dragleave',function () {
    info.innerHTML = '被拖拽元素离开目标元素'
  })

  target.addEventListener('drop',function (e) {
    e.preventDefault()    
    // 获取到传过来的值
    let returnInfo = e.dataTransfer.getData('name')
    console.log(returnInfo)
    info.innerHTML = '被拖拽元素在目标元素上放下'
    // 通过控制台显示信息判断拖放完成和在目标元素上放下两个事件的先后顺序
    console.log('被拖拽元素在目标元素上放下'); 
  })
</script>

nQb1o9.gif

总结

原生 HTML5 拖拽API,drag & drop 在实际开发中会在很多情况下都会遇到,比如我们常见的拖拽上传文件商品拖拽添加购物车等。这些案例我们下次再进行讨论。


希望对读完本文的你有帮助、有启发,如果有不足之处,欢迎批评指正交流!

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

辛苦整理良久,还望手动点赞鼓励~


'摘抄'不是单纯的“粘贴->复制”,而是眼到,手到,心到的一字一句敲打下来。

博客声明:所有转载的文章、图片仅用于作者本人收藏学习目的,被要求或认为适当时,将标注署名与来源。若不愿某一作品被转用,请及时通知本站,本站将予以及时删除。