HTML5 拖拽

最新推荐文章于 2024-05-11 10:06:03 发布

前端61

最新推荐文章于 2024-05-11 10:06:03 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏： H5与C3 文章标签： HTML5 HTML5 拖拽拖拽拖放

本文链接：https://blog.csdn.net/qq_43327305/article/details/103426046

H5与C3 专栏收录该内容

19 篇文章

订阅专栏

本文深入讲解了HTML5中拖拽事件的应用，包括ondragstart、ondrag、ondragend等事件在被拖拽元素上的作用，以及ondragenter、ondragover、ondrop等事件在目标元素上的应用。并通过一个案例展示了如何实现将任意元素拖拽到指定区域的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习拖拽主要就是学习拖拽事件

一、应用于被拖拽元素的事件

ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素是调用
ondragend 应用于拖拽元素，当拖拽结束时调用

二、应用于目标元素的事件

ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用

注意：浏览器默认会阻止ondrop事件：我们必须在ondrapover中阻止默认行为

三、案例：拖拽任意元素到任意框里面

效果：

- 插入图片

代码：

<body>
  <div class="container">
    <div class="item" style="border:1px solid red">
      <!-- 在h5中如果想要拖拽元素就必须为元素添加draggable="true"，图片和超链接默认就可以拖拽 -->
      <p draggable="true" id="$p">拖拽0000</p>
      <p draggable="true" id="$p1">拖拽1111</p>
    </div>
    <div class="item" style="border:1px solid green"></div>
    <div class="item" style="border:1px solid purple"></div>
  </div>
</body>

document.ondragstart = function (e) {
    console.log('ondragstart')
    e.target.style.opacity = 0.5
    e.target.parentNode.style.borderWidth = '5px'
    // 通过e.dataTransfer来实现数据的存储与获取
    e.dataTransfer.setData('id', e.target.id)
  }
  document.ondrag = function () {
    console.log('ondrag')
  }
  document.ondragleave = function () {
    console.log('ondragleave')
  }
  document.ondragend = function () {
    console.log('ondragend')
  }
  document.ondragenter = function () {
    console.log('ondragenter')
  }
  document.ondragover = function (e) {
    console.log('ondragover')
    // 阻止浏览器的默认行为
    e.preventDefault()
  }
  document.ondrop = function (e) {
    // 通过e.dataTransfer.setData()存储的数据只能在drop事件中获取
    let id = e.dataTransfer.getData('id')
    let $p = document.getElementById(id)
    $p.style.opacity = 1
    $p.parentNode.style.borderWidth = '1px'
    e.target.appendChild($p)
  }
  document.ondragleave = function () {
    console.log('ondragleave')
  }

前端进阶精选：点此去