您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  要资料 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
     
   
 订阅
  捐助
HTML5元素拖拽drag与拖放drop相关API
 
来源:CSDN 发布于:2017-10-19
104 次浏览     评价:      
 

其实HTML5就是新增一些有用的API

让我们更轻松的开发

从而把更多精力都放在业务逻辑上来

这些API的使用也非常简单

不过我的记性不太好

所以还是以博客的形式记录下来(手动滑稽)

今天就来写一下这个拖拽API

默认拖拽

说起拖放,其实最早实现拖放功能的还是IE(IE4)

H5就是在IE实例的基础上指定的拖拽规范

在浏览器中,是有默认拖拽的

比如说图片的拖拽

选中文本的拖拽

链接的拖拽

元素拖拽

浏览器默认允许我们拖拽图像、文本以及链接

让其它元素被拖动也是可以实现的

只需要在元素标签上添加一个属性

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

当拖拽这个元素的时候,浏览器就会以半透明复本的方式显示

拖拽事件

拖拽事件应该分为两类

一类是被拖拽元素触发的事件

另一类是拖放目标元素触发的事件

<div id="source" draggable="true"></div>
<div id="target"></div> <!-- 样式略 -->

var source = document.getElementById('source');
var target = document.getElementById('target');

拖拽元素

拖拽元素的时候,被拖拽元素会触发以下事件

  • dragstart
  • drag
  • dragend

当鼠标点中元素并且开始移动时,就会触发dragstart事件(类比mousedown)

拖拽过程中会持续不断地触发drag事件(类比mousemove)

松开鼠标取消拖拽时就会触发dragend事件(类比mouseup)

source.ondragstart = function(){
console.log('开始拖拽');
}
source.ondrag = function(){
console.log('拖拽中');
}
source.ondragend = function(){
console.log('拖拽结束');
}

目标元素

当拖拽的元素拖到一个目标元素上时,目标元素会触发以下事件

  • dragenter
  • dragover
  • dragleave
  • drop

拖拽元素到目标上,就会触发dragenter事件(类比mouseover)

当拖动元素在目标元素中,就会持续触发dragover事件

离开目标元素,触发dragleave事件(类比mouseout)

若拖放元素到了目标元素中(在目标元素中松开鼠标),就会触发drop事件而不会触发dragleave事件

target.ondragenter = function(){
console.log('拖动进入目标元素');
}
target.ondragover = function(){
console.log('目标元素中拖拽');
}
target.ondragleave = function(){
console.log('拖动离开目标元素');
}
target.ondrop = function(){
console.log('拖放');
}

这时我们会发现元素拖放到目标元素中时

并没有触发drop事件

我们看到了一个特殊的光标(圆环+反斜线)

意思就是无效的拖放

所以导致没有触发drop事件

也就是说元素默认是不能够拖放

只要我们在目标元素的dragover事件中取消默认事件就可以解决问题

target.ondragover = function(e){
console.log('目标元素中拖拽');
e.preventDefault(); //增
}

数据交换

只是简单的拖放毫无意义

我们需要进行数据交换

而这个用语数据交换的对象就是事件对象的属性dataTransfer

dataTransfer的两个核心方法是setData()和getData()

setData()用于设置数据,getData()用语接收数据

event.dataTransfer.setData('text','some text');
var text = event.dataTransfer.getData('text');
//保存在dataTransfer中的数据只能在drop事件处理函数中处理

如果我们拖拽了选中文本

那么浏览器默认就会调用dataTransfer.setData,设置对应文本数据

setData()和getData()就是数据类型的字符串

IE定义的数据类型除了“text”文本类型还有“URL”

H5对它进行了扩展,可以指定各种MIME类型

但为了向后兼容,它同样支持“text”和“URL”

它们会被分别映射为“text/plain”和“text/uri-list”

如果数据保存为URL,浏览器会做特殊处理,把它当成网页链接

(所以拖拽链接到另外的浏览器窗口就会打开网页)

必要的话,我们可以手动保存需要传输的数据

var source = document.getElementById('source');
var target = document.getElementById('target');
source.ondragstart = function(e){
e.dataTransfer.setData('text','传递文本数据');
}
target.ondragover = function(e){
e.preventDefault();
}
target.ondrop = function(e){
console.log(e.dataTransfer.getData('text'));
}

拖拽设置

在dataTransfer中还有两个重要的属性

dropEffecteffectAllowed

dropEffect

dropEffect属性值为字符串,表示被拖动元素可以执行哪一种放置行为

要使用这个属性,必须在dragenter事件处理函数中设置

  • none 不能把元素拖放至此(除文本框外全部元素的默认值)
  • move 移动到目标
  • copy 复制到目标
  • link 目标打开拖动元素(拖动元素必须是链接并有URL)

effectAllowed

effectAllowed属性值也是字符串,表示允许拖动元素哪种dropEffect

要使用这个属性,必须在dragst事件处理函数中设置

  • uninitialized 没有设置任何拖放行为
  • none 不能由任何行为
  • copy 仅允许dropEffect值为copy
  • link 仅允许dropEffect值为link
  • move 仅允许dropEffect值为move
  • copyLink 允许dropEffect值为copy和link
  • copyMove 允许dropEffect值为copy和move
  • linkMove 允许dropEffect值为link和move
  • all 允许任意dropEffect
   
 订阅
  捐助
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号