您的位置:首页 > Web前端 > HTML5

HTML5 拖放API

2018-02-25 15:15 323 查看
在HTML 5 之前可以使用mousedown、mousemove、mouseup来实现拖放操作,但着只支持在浏览器内部的拖放,而在HTML 5中,支持浏览器与其他应用程序之间的数据相互拖动

一、实现拖放的步骤

将想要拖放的对象元素的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 拖拽