HTML5拖放Drag的方法
这篇文章主要介绍“HTML5拖放Drag的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5拖放Drag的方法”文章能帮助大家解决问题。
成都创新互联公司是一家集网站建设,大祥企业网站建设,大祥品牌网站建设,网站定制,大祥网站建设报价,网络营销,网络优化,大祥网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
1. 基本的JavaScript原生实现
通过原生的JavaScript 代码实现拖放行为非常复杂, 需要使用DOM 事件模型里的mousedown、mousemove和mouseup事件,还需要不断获得鼠标坐标,修改元素的坐标位置,性能会成为很大问题。另外,实现时还需要考虑浏览器兼容性问题,并且不支持浏览器页面以外的拖放行为。
2. JavaScript库
jQuery等JavaScript库提供了封装好的拖放处理,解决了JavaScript原生实现的复杂性和兼容性问题。但是这些JavaScript库为了保证兼容性进行了复杂的计算和处理,使用了大量的代码,造成库的体积过大,影响页面的加载速度,增大了网络流量。
Drag & Drop API 的优点
使用Drag & Drop API,可以给我们带来如下好处。
它通过事件的方式让浏览器原生支持拖放行为,我们不再需要编写复杂的JavaScript代码,不再需要考虑千奇百怪的浏览器兼容性问题。
用原生方式取代JavaScript代码的方式也大大减少了页面的大小,让用户能更快地打开页面,减少带宽请求。
它提供了dataTransfer接口来存储数据,允许我们定义拖放时的效果,此外还支持自定义拖放操作。
它支持浏览器页面以外的拖放行为,例如从桌面拖放一个文件到浏览器页面里,这在以前是不可能实现的。
Drag & Drop API 的主要操作
Drag & Drop API主要包含三方面的内容:事件、属性和接口,下面我们对它们一一进行讲解。
1. 主要事件
下面是拖放的相关事件,按照拖放的过程分为7个。
dragstart。拖动开始的事件,需绑定在拖曳对象上。
drag。从dragstart开始后到dragend结束前,在拖动时这个事件不断出现,需绑定在拖曳对象上。
dragend。拖动结束的事件,需绑定在拖曳对象上。
dragenter。拖到当前元素区域内的事件,需绑定在推曳对象所拖曳的对象上。
dragover。拖到当前元素的区域上的事件,这个事件在拖动过程中不断被触发,需绑定在拖曳对象正拖曳到的对象上。
dragleave。拖出当前元素区域的事件,需绑定在拖曳对象刚刚拖曳到的对象上。
drop。在当前元素区域停止拖曳的事件,需绑定在拖曳对象所放置到的对象上。
一个完整的拖放事件过程如下图所示,我们可以轻松地使用上面的事件来处理复杂的拖放行为。
一个完整的HTML5拖放事件过程
2. 相关属性
默认情况下,img和a标签可以进行拖放。如果其他类型的节点也需要支持拖动,必须添加属性draggable="true"。
使一个元素支持拖动其实非常简单,第一要为此元素设置draggable属性,第二需要为它的dragstart事件添加函数来处理拖曳数据。
Drag & Drop API还有一个dropzone属性,用于设置放置目标区域所允许的文件类型和反馈方式,例如用move s:text/plain表示展现数据移动的效果和接受任何文本的放置,用copy f:image/png表示展现数据复制的效果和接受png格式图片的放置。
因此,要使一个元素允许其他拖曳元素放置到它之上,此元素必须要有dropzone属性并且监听drop事件(和上面元素支持拖曳的两个条件非常相似)。不过,我们也可以采用为放置元素自定义事件处理的方式来代替dropzone属性,这就需要我们在dragenter事件里判断此元素是否支持放置以及在dragover事件里指定为用户显示什么样的反馈效果。
3.主要接口
HTML5 使用dataTransfer 接口来支持拖放数据存储, 它的使用方式一般为event.dataTransfer。dataTransfer对象不仅可以用来传递数据,还可以用来指定拖曳对象和放置对象所表现的反馈效果,它包含以下属性和方法。
dataTransfer.effectAllowed[=value]。
该属性返回拖曳对象允许的拖曳时的反馈效果。作为方法时,用于初始化dragenter和dragover事件时允许的dropEffect属性,
可以设置的值如下表所示,其默认值为uninitialized。
dropEffect属性的值及描述:
dropEffect属性的值及描述
这个属性可以在拖曳对象的dragstart事件处理函数中设置,例如下面的代码示例:
dragElement.ondragstart = function(e){
var dt = e.dataTransfer;
dt.effectAllowed = 'link';
};
dataTransfer.dropEffect[=value]。
该属性返回已设置的拖放时反馈效果。
作为方法时,可以设置拖放对象时表现什么样的反馈效果,包含如下值:none、copy、link和 move,这几个值分别代表拖曳对象不能放置在此处、拖曳对象移动到放置对象、拖曳对象被复制到放置对象、拖曳对象被链接到放置对象4种效果。
这4种效果表现为不同的鼠标形状,如下图3-5所示。
不同的鼠标形状
dropEffect的设置可以在放置对象的dragenter或者dragover事件处理函数中处理,如下面的代码所示。
dropElement.ondragover = function(e){
var dt = e.dataTransfer;
dt.dropEffect = 'link';
e.preventDefault();
};
另外,如果该效果与起初设置的effect-Allowed效果不符,则拖放操作将会失败。
dataTransfer.items。返回一个关于拖曳数据的DataTransferItemList对象。
dataTransfer.setDragImage(element, x, y)。指定拖曳元素时随鼠标移动的图片,x、y分别是图片相对于鼠标的横坐标和纵坐标。
dataTransfer.addElement(element)。将元素添加到被拖曳的列表里。如果你想让某个元素跟随被拖曳元素一同被拖曳,可以使用这个方法。
dataTransfer.types。返回在dragstart事件触发时为元素存储数据的格式。如果是系统文件的拖曳,则返回files。
dataTransfer.setData(format, data)。为元素添加数据,在dragstart事件触发时可以用它为被拖曳元素存储数据。setData的数据格式一般有两种:text/plain(设置format为字符串text即可,主要用于文本数据)和text/uri-list(设置format为字符串url即可,主要用于url)。
data=dataTransfer.getData(format)。返回存储的数据。如果数据不存在,则返回空字符串。
dataTransfer.clearData([format])。删除指定格式的数据。如果不指定格式,则删除所有数据。
dataTransfer.files。如果是拖曳系统文件,返回正在被拖曳的文件列表对象。可以通过它获得所拖曳的文件数据。
dataTransfer对象提供的属性和方法使得我们自定义处理拖放操作成为可能。
文件拖放上传实例
下面的代码清单是一个JavaScript代码示例,演示了如何将一个元素拖放到另一个元素上,并且在鼠标放下时改变放置目标元素的状态。
var dragElement = document.getElementById('drag-element');
var dropElement = document.getElementById('drop-element');
dragElement.setAttribute('draggable', 'true'); //允许dragElement元素可以拖动
dragElement.ondragstart = function(e){
var dt = e.dataTransfer;
dt.effectAllowed = 'link'; //设置反馈效果为链接形式
};
dropElement.ondragover = function(e){
e.preventDefault();
}
dropElement.ondrop = function(){
dropElement.innerHTML = '拖曳结束'; //改变放置目标元素的状态
}
dropElement.ondragenter = function(e){
var dt = e.dataTransfer;
dt.dropEffect = 'link';
e.preventDefault();
};
可能犯的一个错误
创建拖放事件监听程序时,一定要阻止默认行为,尤其是在dragover事件中一定要执行preventDefault(),否则drop事件不会被触发,同时dropEffect也不会生效。
下面是正确的代码:
dropElement.addEventListener('dragover', function(e){
e.preventDefault();
}, false);
请注意,dragstart事件里不能阻止默认行为,否则拖曳行为就不会发生。
关于“HTML5拖放Drag的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
文章题目:HTML5拖放Drag的方法
当前地址:http://scyanting.com/article/ippggo.html