分享到微信朋友圈

打开微信,“扫一扫”功能,
即可将网页分享至好友/朋友圈。

文章索引

返回顶部
  / 学习笔记 / H5 CSS3 / HTML5的拖拽(drag)与拖放(drop)

HTML5的拖拽(drag)与拖放(drop)

本文为秃头大叔 小虎的个人博客 原创内容,转载请注明出处,有问题可联系本人!
本文地址:http://www.wuxiaohu.com/2017/04/21/825.html

拖放(drag 和 drop)是 HTML5 标准的组成部分,HTML5为其实现提供了非常方便的API!以下就是实现把列表从一个框拖拽到另一个框,可以实际拖拽试试:

拖拽内容的HTML:

以上拖拽完成的源代码:
CSS:

 
  1. .dp-ul { display:inline-blockwidth: 30%; min-width300pxheight280pxbackground#999padding20pxvertical-aligntop;}  
  2. .dp-ul li { padding: 0 10pxmargin10px 0; line-height30pxborder1px dashed #ffflist-stylenonecolor#fff;}  
  3. #inputInfo{ padding-left50px; border1px dashed #cccheight40pxline-height40px;}  
  4. #inputInfo span{ displayinline-blockvertical-aligntop;}  
  5. #inputInfo textarea{ height38pxwidth450pxpadding: 0; overflow-x: autooverflow-y: hiddenbordernone; resize: none;}  

Html:

 
  1. <ul class="dp-ul">  
  2.     <li class="dp-li">不可拖拽列表一</li>  
  3.     <li class="dp-li" draggable="true">可拖拽列表二</li>  
  4.     <li class="dp-li" draggable="true">可拖拽列表三</li>  
  5.     <li class="dp-li" draggable="true">可拖拽列表四</li>  
  6.     <li class="dp-li" draggable="true">可拖拽列表五</li>  
  7. </ul>  
  8. <ul class="dp-ul">  
  9.     <li class="dp-li">不可拖拽列表一</li>  
  10. </ul>  
  11. <div id="inputInfo"><span>拖拽内容的HTML:</span><textarea readonly="readonly">还没开始拖拽</textarea></div>  

Javascript:

  1. var drageles = document.querySelectorAll('.dp-li[draggable="true"]'), // 可拖拽元素集合
  2.     droparea = document.querySelectorAll('.dp-ul')[1], // 拖放目标 “ul”
  3.     dragelen = drageles.length, // 可拖拽元素的长度
  4.     graginfo = document.querySelector('#inputInfo'), // 例子中用来显示信息的DOM
  5.     dragele = null;  // 每次拖拽都会重新赋值的变量,表示正在拖拽的对象
  6. for(var i = 0; i<dragelen; i++){ // 遍历所有可拖拽元素,绑定事件
  7.   drageles[i].onselectstart = function(){ // onselectstart为默认选中事件
  8.     return false// 禁用该事件,禁止选择网页中的文字;该事件几乎可以用于所有对象,但是不被 input 和 textarea 标签支持
  9.   };  
  10.   drageles[i].ondragstart = function(e){ // 拖拽开始
  11.     e.dataTransfer.effectAllowed = "move"// 允许的操作为 “move”
  12.     e.dataTransfer.setData("text", e.target.outerHTML); // 设置储存在dataTransfer 的数据 text
  13.     e.dataTransfer.setDragImage(e.target, 0, 0); // 设置拖拽时显示的图像信息
  14.     dragele = e.target; // 用 .target 定义拖拽对象
  15. return true// 继续拖拽行为
  16.   }  
  17.   drageles[i].ondragend = function(e){ // 拖拽结束
  18.     e.dataTransfer.clearData("text"); // 清空设置的数据,释放内存
  19.     dragele = null// 清空 dragele,释放内存
  20. return false// 拖拽到此为止
  21.   }  
  22. }  
  23. droparea.ondragover = function(e){ // 放置目标内持续触发
  24.   e.preventDefault(); // 禁用默认动作(默认不可以放置元素到另一个元素之上)
  25. return true// 继续触发
  26. }  
  27.   droparea.ondragenter = function(e){ // 进入目标触发
  28. return true// 不做什么处理
  29.   }  
  30.   droparea.ondrop = function(e){ // 放置目标
  31.     graginfo.innerHTML = '<span>拖拽内容的HTML:</span><textarea readonly="readonly" >'+e.dataTransfer.getData("text")+'</textarea>'; // 显示相关信息
  32. if(dragele){ // 如果dragele有定义,即为拖拽的元素
  33.       droparea.appendChild(dragele); // 把拖拽元素添加到目标 UL 列表中
  34.     }  
  35. return false// 结束放置
  36.   }

看过以上例子后再来总结总结,HTML5 拖拽的前提要求:

 

标签属性:draggable 

标签元素要设置 draggable = true,才能开始拖拽,否则不会有效果;以上HTML代码中一目了然;

当然,除了网页元素之间的拖拽之外,它的强大还体现在可以拖拽系统文件到浏览器

拖拽的重点其实就是几个“事件” 和 “dataTransfer”对象:

 

主要事件:

dragstart :拖拽元素开始被拖拽的时候触发,事件作用在被拖曳元素;从操作系统拖拽文件到浏览器时不触发此事件;

dragenter :拖拽鼠标进入目标元素的时候触发,事件作用在目标元素

dragover :拖拽鼠标在目标元素上移动的时候触发,事件作用在目标元素;默认情况下,数据/元素不能放置到其他元素中,可通过调用 event.preventDefault() 方法来实现该事件;

dragleave :拖拽时鼠标移出目标元素的时候触发,事件作用在目标元素

drag :拖拽期间持续触发,事件作用在被拖曳元素

drop :鼠标在拖放目标上释放的时候触发,事件作用在目标元素;默认情况下,此时监听器需要收集数据并且执行所需操作;如果是从操作系统拖放文件到浏览器,可通过调用event.preventDefault() 方法禁用默认动作;

dragend :当拖拽完成后触发,事件作用在被拖曳元素;将元素从浏览器拖放到操作系统时不会触发此事件。

 

DataTransfer对象(主要的属性和方法):

dropEffect :拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作;取值有copy,move,link和none;

effectAllowed :指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,linkMove,all,none默认为uninitialized(允许所有操作);

files :包含File对象的FileList对象;从操作系统向浏览器拖放文件时有用;针对某个文件,可以获取它的文件名(files[i].name)、文件大小(files[i].size)、文件类型(files[i].type);

types :返回一个DOMStringList对象的只读属性,数据格式的顺序与拖动操作中包含的数据顺序相同;

setData(format, data) :以键值对设置数据,format通常为数据格式,如text,text/html;

getData(format) :获取设置的对应格式数据,format与setData()中一致;

clearData(format) :清除指定格式的数据;

setDragImage(imgElement, x, y) :设置自定义图标;默认情况下,许多浏览器显示一个被拖动元素的半透明版本;参数imgElement必须是一个图像元素,而不是指向图像的路径,参数x和y表示图像相对于鼠标的位置。

 

拖拽的理论基础就这些了,其实网络上类似的文章也很多;写在这里的也没有什么特别之处,关键还是用少许不同的案例来加深自己对概念的理解;

拖拽的用途很多,拖拽上传必定是要了解的;拖拽文件是可以直接获取文件各种信息,不过具体怎么实现上传功能呢;下回在具体研究吧!哈哈!

终于还是被你发现了

o(* ̄▽ ̄*)ブ  大叔的卖萌!  o(* ̄▽ ̄*)ブ

评论(0)

沙发空缺中,赶紧抢了吧

发表评论