HTML5 拖拽实现
简介:
最早在网页中引入JavaScript拖放功能是IE4。当时,网页中只有两种对象可以拖放:图像和某些文本。拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它。拖放文本时,要先选中文本,然后可以像拖放图像一样拖放被选中的文本。在IE4中,唯一有效的放置目标是文本框。到了IE5,拖放功能得到拓展,添加了新的事件,而且几乎网页中的任何元素都可以作为放置目标。IE5.5更进一步让网页中的任何元素都可以拖放。HTML5以IE的实例为基础指定了拖放规范。
一、基本释义
1 实现拖拽效果
* 要拖拽的文件是什么? - 源元素
* 要拖拽到哪里去? - 目标元素
2 目前实现拖拽效果
* 使用原生DOM就能实现 - 最麻烦
* 使用jQuery的插件 - 拖拽效果
* HTML5中提供的拖拽功能
二、HTML5中实现拖拽
1. 源元素事件
* dragstart - 当鼠标开始拖放时被触发
* drag - 当鼠标拖放过程中,类似于mousemove事件
* dragend - 当鼠标结束拖放时被触发
// 为源元素绑定源元素事件
myimg.addEventListener("dragstart",MyDragStart);
myimg.addEventListener("drag",MyDrag);
myimg.addEventListener("dragend",MyDragEnd);
2. 目标元素事件
* dragenter - 当鼠标拖放进入到目标元素内被触发
* dragover - 当鼠标到达目前元素被触发
* 为该事件增加event.preventDefault();
* drop - 当鼠标实现拖放效果时被触发
* 默认情况下,该事件没有被触发
* 原因 - HTML页面默认情况下,不允许拖放
* 称之为HTML页面的默认行为
* 解决 - 阻止页面的默认行为
* 事件对象event.preventDefault()方法
* dragleave - 当鼠标拖放离开目标元素被触发
// 为目标元素绑定事件
d2.addEventListener("dragenter",MyDragEnter);
d2.addEventListener("dragover",MyDragOver);
d2.addEventListener("drop",MyDrop);
d2.addEventListener("dragleave",MyDragLeave);
3. dataTransfer对象
* 作用 - 类似于window系统的剪切板的功能
* 功能
* 可以将源元素的信息(数据),存储在这里
* 将存储在该对象的源元素信息,提供给目标元素
* 方法
* setData() - 设置(源元素)数据
* 在源元素事件中使用
* getData() - 获取设置的数据
* 在目标元素事件中使用
* clearData() - 清除(设置的)数据
* 所有的数据内容,存储在浏览器内存中
* 当使用完毕数据内容时,清除
* setDragImage()方法
* 作用 - 修改拖放过程中,鼠标跟随的图片效果
* 用法 - drag、dragstart等事件
* 注意 - 实际操作中,该方法几乎不用
4.可拖动
默认情况下,图像、链接和文本是可以拖动的,也就是说,不用额外编写代码,用户就可以拖动它们。文本只有在被选中的情况下才能拖动,而图像和链接在任何时候都可以拖动。
让其它元素可以拖动也是可能的。HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动。图像和链接的draggable
属性自动被设置成了true,而其它元素这个属性的默认值都是false。要想让其它元素可拖动,或者让图像或链接不能拖动,都可以设置这个属性。例如:
<!-- 让这个图像不可以拖动 -->
<img src="smile.gif" draggable="false" alt+"Smiley face">
<!-- 让这个元素可以拖动 -->
<div draggable="true">...</div>
支持draggable属性的浏览器有IE10+、Firefox 4+、Safari 5+和Chrome。Opera
11.5以及之前的版本都不支持HTML5的拖放功能。另外,为了让Firefox
支持可拖动属性,还必须添加一个ondragstart事件处理程序,并在dataTransfer对象中保存了一些信息。
5.dropEffect 与 effectAllowed
利用dataTransfer对象,可不光是能够传输数据,还能通过它来确定被拖动的元素以及作为放置目标的元素能够接受什么操作。为此,需要访问dataTransfer对象的两个属性:dropEffect和effectAllowed。
其中,通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。
1. "none":不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
2. "move":应该把拖动的元素移动到放置目标。
3."copy":应该把拖动的元素复制到放置目标。
4."link":表示放置目标会打开拖动的元素(但拖动的元素必须是一个链接,有URL)。
要使用dropEfect属性,必须在ondraggenter事件处理程序中针对放置目标来设置它。
dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect,effectAllowed属性可能的值如下。
1."uninitialized":没有该被拖动元素放置行为。
2."none":被拖动的元素不能有任何行为。
3."copy":只允许值为“copy”的dropEffect。
4."link":只允许值为“link”的dropEffect。
5."move":只允许值为“move”的dropEffect。
6."copyLink":允许值为“copy”和“link”的dropEffect。
7."copyMove":允许值为“copy”和”link”的dropEffect。
8."linkMove":允许职位“link”和”move”的dropEffect
9."all":允许任意dropEffect。
必须在ondraggstart事件处理程序中设置effectAllowed属性。
图片在两个div中拖放示例
HTML部分
<div id="d1">
<img id="myimg" src="bg.jpg" />
</div> <div id="d2"></div>
js
//获取图片及两个div元素
var d1 = document.getElementById("d1"),
myimg = document.getElementById("myimg"),
d2 = document.getElementById("d2");
//给图片绑定dragstart事件
myimg.addEventListener("dragstart",MyDragStart); //给第二个div绑定dragover,drop两个事件
d2.addEventListener("dragover",MyDragover);
d2.addEventListener("drop",MyDrop);
//给第一个div绑定dragover,drop两个事件
d1.addEventListener("dragover",MyDragover);
d1.addEventListener("drop",MyDrop); //图片开始拖拽事件的处理函数
function MyDragStart(event){
var mydata = myimg.id;//保存ID值
var trans = event.dataTransfer;
trans.setData("text",mydata);
}
//该处理函数是为阻止页面的默认行为
function MyDragover(){
event.preventDefault();
}
//drop处理函数
function MyDrop(event){
//
var trans = event.dataTransfer;//获取数据保存对象
var mysrc = trans.getData("text");//图片id
var ele = document.getElementById(mysrc);//获取到图片对象
if (ele != event.srcElement)//判断图片是否移动
{
event.srcElement.appendChild(ele.parentNode.removeChild(ele));//将img元素剪切到目标div中
} trans.clearData("text");//清除数据
}
HTML5 拖拽实现的更多相关文章
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
- HTML5拖拽实例
最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...
- html之div拖拽,html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
随机推荐
- FME Cloud 账号申请流程
第一步,访问SAFE的FME Cloud注册页,官网明确表态,如果你是一个新的FME Cloud用户,你可以免费获得一个初级版.地址:https://console.fmecloud.safe.com ...
- JMeter:生成漂亮的接口/压力测试的HTML报告
JMeter生成HTML网页报告(非gui模式操作) 我们做性能测试的时候会经常使用一些性能测试工具,比如loardrunner和jmeter,我个人比较喜欢Jmeter这个工具,jmeter之前版本 ...
- 《Linux内核分析》第三周学习小结 构造一个简单的Linux系统OS
郝智宇 无转载 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 第三周 构造一个简单的Linux系统Me ...
- LINUX内核分析第二周学习总结——操作系统是如何工作的
LINUX内核分析第二周学习总结——操作系统是如何工作的 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163.com/course ...
- 第二个Sprint冲刺第四天(燃尽图)
- Alpha冲刺-第一天
1.1 今日完成任务情况以及遇到的问题. 完成任务情况 杜世康:弹幕的爬取 刘丹,李玉莹:系统统计功能实现 曹莹雯,尹楠: 主播管理功能实现 王静雅 :团队编码规范说明与本次博文撰写 遇到的问题 在爬 ...
- OneZero第二次站立会议(2016.3.22)
会议时间:2016年3月22日 9:33~9:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论并修改. 会议内容:以下为会议插图 1.界面原型方面,小组成员对夏所画的 ...
- idea的激活
参考网址:https://blog.csdn.net/qq_34273222/article/details/78810799 侵删 1.进到文件夹中:C:\Windows\System32\driv ...
- Reachability from the Capital CodeForces - 999E(强连通分量 缩点 入度为0的点)
题意: 问至少加几条边 能使点s可以到达所有的点 解析: 无向图的连通分量意义就是 在这个连通分量里 没两个点之间至少有一条可以相互到达的路径 所以 我们符合这种关系的点放在一起, 由s向这些点的任 ...
- idea log4j 用法
1.导入jar包 这里用的maven导入 <!-- LOGGING begin --> <dependency> <groupId>org.slf4j</gr ...