HTML5 drag和drop具体使用详解


Posted in HTML / CSS onJanuary 18, 2021

简介

拖拽(Drag/Drop)是一个很普遍、很常用的操作,即抓取一个对象后,放到想要放的地方。 在H5中,拖拽是一个标准操作,任何元素都可以拖拽!! 但是!! 想要实现拖拽,需要添加 拖拽属性。

H5中拖拽属性:draggable: auto | true | false

注意:链接和图片默认是可拖动的,则不需要 draggable 属性。

- Drag(在拖拽目标时触发事件)

  • dragstart - 元素开始拖动时触发此事件
  • drag - 元素正在拖动时触发此事件
  • dragend - 元素拖动结束后触发此事件

- Drop(在目标区域释放时触发事件)

  • dragenter - 当被拖动的元素进入目标区域内时触发此事件
  • dragover - 当被拖动的元素在目标区域内拖动时触发此事件
  • dragleave - 当被拖动的元素离开目标区域时触发此事件
  • drop - 当被拖动的元素在目标区域被放下时触发此事件

拖拽步骤

设置元素属性draggable 为 true

<main class="main">
    <div class="left" id="left">
      <div class="txt-show">左边区域</div>
      <div class="dargable txt" id="txt1" draggable="true">可移动的文字一</div>
      <div class="dargable txt" id="txt2" draggable="true">可移动的文字二</div>
      <div class="dargable txt" id="txt3" draggable="true">可移动的文字三</div>
      <div class="dargable txt" id="txt4" draggable="true">可移动的文字四</div>
      <div class="dargable txt" id="txt5" draggable="true">可移动的文字五</div>
    </div>
    <div class="right" id="right">
      <div class="txt-show">右边区域</div>
    </div>
  </main>

拖动

dragstart 事件: 在进行拖放操作时,通过dataTransfer来实现数据的存储和获取,每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。

let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart', (event) => {
    const target = event.target;
    // 在项目拖动的开始事件(ondragstart)的时候,可以对dataTransfer进行设值操作(setData)。
    // 拖拽, dataTransfer 属性, 等于运输车
    // 后续用 dataTransfer.getData获取
    // 在项目拖动结束的时,可以获取dataTransfer对象里的值。
    event.dataTransfer.setData('Text', target.id)
    // js 事件有冒泡机制
    console.log('drag开始拖动啦1');
  })

drag事件:在拖拽过程中一直执行

left.addEventListener('drag', (event) => {
    console.log('drag正在拖啦2');
  })

dragend事件:结束

left.addEventListener('dragend', (event) => {
    console.log('dragend拖动结束啦7');
  })

放置

dragenter 和dragleave 事件:进入或离开目标区域

target.addEventListener('dragenter', (event) => {
    console.log('dragenter进入区域啦3')
  })
    target.addEventListener('dragleave', (event) => {
    console.log('dragleave离开拖动区域啦5')
  })

dragover事件:默认无法将数据/元素放置到其他元素中。如果需要设置允许放置,就要阻止元素的默认行为。

target.addEventListener('dragover', (event) => {
    // 阻止默认行为
    event.preventDefault();
    console.log('dragover在区域内拖动啦4')
  })

drop事件:放下

target.addEventListener('drop', (event) => {
    console.log('drop释放鼠标啦6')
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main {
      display: flex;
      justify-content:space-around;
    }
    .left {
      width: 300px;
      height: 500px;
      border: 1px solid lightseagreen;
      margin-right: 10px;
      /* background-color: green; */
    }
    .right {
      width: 300px;
      height: 500px;
      border: 1px solid lightseagreen;
      text-align: center;
      padding: 1px;
      /* background: red; */
    }
    .txt {
      border: 1px solid gray;
      margin: 1px;
      padding: 5px;
      cursor: move;
    }
  </style>
</head>
<body>
  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">左边区域</div>
      <div class="dargable txt" id="txt1" draggable="true">可移动的文字一</div>
      <div class="dargable txt" id="txt2" draggable="true">可移动的文字二</div>
      <div class="dargable txt" id="txt3" draggable="true">可移动的文字三</div>
      <div class="dargable txt" id="txt4" draggable="true">可移动的文字四</div>
      <div class="dargable txt" id="txt5" draggable="true">可移动的文字五</div>
    </div>
    <div class="right" id="right">
      <div class="txt-show">右边区域</div>
    </div>
  </main>
  <script>
  let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('Text', target.id)
    console.log('drag开始拖动啦1');
  })
  target.addEventListener('dragstart', (event) => {
    const target = event.target; 
    event.dataTransfer.setData('Text', target.id)
  })
  left.addEventListener('drag', (event) => {
    console.log('drag正在拖啦2');
  })
  left.addEventListener('dragend', (event) => {
    console.log('dragend拖动结束啦7');
  })
  target.addEventListener('dragenter', (event) => {
    console.log('dragenter进入区域啦3')
  })
  target.addEventListener('dragover', (event) => {
    event.preventDefault();
    console.log('dragover在区域内拖动啦4')
  })
  left.addEventListener('dragover', (event) => {
    event.preventDefault();
  })
  target.addEventListener('dragleave', (event) => {
    console.log('dragleave离开拖动区域啦5')
  })
  target.addEventListener('drop', (event) => {
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })
  left.addEventListener('drop', (event) => {
    let drag_id = event.dataTransfer.getData('text')
    left.appendChild(document.getElementById(drag_id))
  })
  </script>
</body>
</html>

小记

dragstart事件中通过dataTransfer来实现数据的存储和获取,每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。在项目拖动的开始事件(ondragstart)的时候,可以对dataTransfer进行设值操作(setData)。event.dataTransfer.setData() 进行设值,在拖动结束后,可以通过event.dataTransfer.getData()获取dataTransfer对象里的值。

浏览器默认无法将数据/元素放置到其他元素中,如果需要设置允许放置,就要阻止元素的默认行为。通过event.preventDefault()阻止。

可以通过添加css样式进行对拖拽效果的改变。例:dragSrc.classList.add('ds') 。使用classList在元素中添加,移除及切换 CSS 类,classList 属性是只读的,但可以使用 add() 和 remove() 方法修改它。

使用 appendChild() 方法移除元素到另外一个元素。

HTML Drag and Drop API

DataTransfer()

HTML DOM appendChild() 方法

HTML DOM addEventListener() 方法

到此这篇关于HTML5 drag和drop具体使用详解的文章就介绍到这了,更多相关HTML5 drag和drop内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3的transition属性详解
Dec 15 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 #HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 #HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 #HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 #HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 #HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 #HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 #HTML / CSS
You might like
php上传、管理照片示例
2006/10/09 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
党在我心中演讲稿
2014/09/02 职场文书
社区综治工作汇报
2014/10/27 职场文书
音乐之声观后感
2015/06/04 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript