HTML5 拖放API
2018-02-25 15:15
323 查看
在HTML 5 之前可以使用mousedown、mousemove、mouseup来实现拖放操作,但着只支持在浏览器内部的拖放,而在HTML 5中,支持浏览器与其他应用程序之间的数据相互拖动
一、实现拖放的步骤
将想要拖放的对象元素的draggable属性设为true(draggable = “true”),这样才能将该元素进行拖放;另外,img元素与a元素(必须指定href)默认允许拖放
编写与拖放有关的事件处理代码
示例:有一个显示”请拖放”文字的div元素,可以把它拖放到位于它下部的div元素中,每次拖放时,在下部的div元素中会追加一次”你好”文字
运行结果如下:
二、知识点解释
开始拖动(dragstart事件发生)时,把要拖动的数据存入DataTransfer对象(setData()方法)。DataTransfer对象专门用来存放拖放时要携带的数据,可以被设置为拖动事件对象的dataTransfer属性,setData(携带数据的数据种类字符串(只能是”text/plain”或”text/html”的表示MIME类型的文字),携带的数据)
现支持拖动处理的MIME的类型为一下几种:
text/plain:文本文字
text/html:HTML文字
text/xml:XML文字
text/uri-list:URL列表,每个URL为一行
如果把”dt.setData(“text/plain”,”你好”);”改为”dt.setData(“text/plain”,this.id);”,因为把被拖到元素的id当成了参数,所携带的数据就是被拖动元素中的数据了,因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据
针对拖放的目标元素,必须在dragend或dragover事件内调用”事件对象.preventDefault()”方法,因为在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理给关闭
目标元素接受到被拖放的元素后,执行getData()方法从DataTransfer里获取数据,getData()方法的参数为setData()方法中指定的数据种类
要实现拖放过程,必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则目标元素不能接受被拖放的元素
要实现拖放过程,还必须设定整个页面为不执行默认处理(拒绝被拖放),否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的,如果页面拒绝拖放,那么页面上其他元素就都不接受拖放了
要使元素可以被拖放,首先必须把该元素的draggable属性设为true为了在所有支持拖放API的浏览器中都能正常运行,需要制定”-webkit-user-drag:element”
一、实现拖放的步骤
将想要拖放的对象元素的draggable属性设为true(draggable = “true”),这样才能将该元素进行拖放;另外,img元素与a元素(必须指定href)默认允许拖放
编写与拖放有关的事件处理代码
事件 产生事件的元素 描述 dragstart 被拖放的元素 开始拖放操作 drag 被拖放的元素 拖放过程中 dragenter 被拖放过程中鼠标经过的元素 被拖放的元素开始进入本元素的范围内 dragover 被拖放过程中鼠标经过的元素 被拖放的元素正在本元素范围内移动 dragleave 被拖放过程中鼠标经过的元素 被拖放的元素离开本元素的范围 drop 拖放的目标元素 有其他的元素被拖放到了本元素中 dragend 被拖放的对象元素 拖放操作结束
示例:有一个显示”请拖放”文字的div元素,可以把它拖放到位于它下部的div元素中,每次拖放时,在下部的div元素中会追加一次”你好”文字
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>简单拖放示例</title> </head> <body onload="init();"> <div id="dragme" draggable="true" style="width:200px;border:1px solid gray;"> 请拖放 </div> <div id="text" style="width:200px;height:200px;border:1px solid gray"></div> <script> function init(){ var source = document.getElementById("dragme"); var dest = document.getElementById("text"); //1.拖放开始 source.addEventListener("dragstart",function(e){ //向datatransfer对象追加数据 var dt = e.dataTransfer; dt.effectAllowed = 'all'; //2.拖动元素为dt.setData("text/plain",this.id); dt.setData("text/plain","您好"); },false); //3.dragend 拖放结束 dest.addEventListener("dragend",function(e){ //不执行默认处理(拒绝被拖放) e.preventDefault(); },false); //4.drop 被拖放 dest.addEventListener("drop",function(e){ //从dataTransfer对象取得数据 var dt = e.dataTransfer; var text = dt.getData("text/plain"); dest.textContent += text; //5.不执行默认处理(拒绝被拖放) e.preventDefault(); //停止时间传播 e.stopPropagation(); },false); //6.设置页面属性 不执行默认处理(拒绝被拖放) document.ondragover = function(e){ e.preventDefault(); } document.ondrop = function(e){ e.preventDefault(); } } </script> </body> </html>
运行结果如下:
二、知识点解释
开始拖动(dragstart事件发生)时,把要拖动的数据存入DataTransfer对象(setData()方法)。DataTransfer对象专门用来存放拖放时要携带的数据,可以被设置为拖动事件对象的dataTransfer属性,setData(携带数据的数据种类字符串(只能是”text/plain”或”text/html”的表示MIME类型的文字),携带的数据)
现支持拖动处理的MIME的类型为一下几种:
text/plain:文本文字
text/html:HTML文字
text/xml:XML文字
text/uri-list:URL列表,每个URL为一行
如果把”dt.setData(“text/plain”,”你好”);”改为”dt.setData(“text/plain”,this.id);”,因为把被拖到元素的id当成了参数,所携带的数据就是被拖动元素中的数据了,因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据
针对拖放的目标元素,必须在dragend或dragover事件内调用”事件对象.preventDefault()”方法,因为在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理给关闭
目标元素接受到被拖放的元素后,执行getData()方法从DataTransfer里获取数据,getData()方法的参数为setData()方法中指定的数据种类
要实现拖放过程,必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则目标元素不能接受被拖放的元素
要实现拖放过程,还必须设定整个页面为不执行默认处理(拒绝被拖放),否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的,如果页面拒绝拖放,那么页面上其他元素就都不接受拖放了
要使元素可以被拖放,首先必须把该元素的draggable属性设为true为了在所有支持拖放API的浏览器中都能正常运行,需要制定”-webkit-user-drag:element”
相关文章推荐
- Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)
- HTML5拖放API(代码展示)
- HTML5元素拖拽drag与拖放drop相关API
- HTML5_06之拖放API、Worker线程、Storage存储
- HTML5的拖放API
- HTML5 进阶系列:拖放 API 实现拖放排序
- HTML5拖放API
- HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
- HTML5拖放操作API及实例
- js原生拖拽事件(HTML5的拖放 API)
- HTML5拖放API
- HTML5 进阶系列:拖放 API 实现拖放排序
- HTML5 进阶系列:拖放 API 实现拖放排序
- HTML5拖放API2
- HTML5拖放API(数据传输对象)
- 搞懂html5新增的拖放API(分析火狐和其它浏览器的不同)
- HTML5 进阶系列:拖放 API 实现拖放排序
- 第90天:HTML5中文件API和拖放操作
- html5---拖放API
- HTML5拖放API(相关重点)