HTML5的拖放操作
HTML5的拖放
概念：在HTML5中，拖放是一种常见的特性，可以抓取元素并拖入不同的位置。任何元素都可以被拖放。
这种拖放操作仅限于在浏览器内的元素间拖放，不能实现跨应用拖放
其中图片，链接默认是开启的
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单拖放</title>
<style>
#square{
width:300px;
height:200px;
background:blue;
}
#box{
width:300px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="square" draggable="true"></div>
<div id="box"></div>
</body>
</html>
运行结果:
拖放事件
在HTML5的拖放操作中，首先要明确拖拽元素和目标元素
- 拖拽元素，指的是在页面中设置了 draggable=“true” 属性的元素。
- 目标元素，页面中的任何一个元素都可以成为目标元素。
拖放事件主要分成两个部分：拖拽元素事件和目标元素事件
拖拽元素事件
| 事件 | 描述 |
|---|---|
| ondragstart | 拖拽前触发，拖拽瞬间发生的事情 |
| ondrag | 对象被拖拽时每次鼠标指针移动都会触发 |
| ondragend | 拖拽对象时用户释放鼠标按键的时候触发 |
目标元素事件
| 事件 | 描述 |
|---|---|
| ondragenter | 鼠标指针初次移到目标元素上并且正在进行拖拽时触发，相当于onmouseover事件 |
| ondragover | 拖拽时鼠标指针移到某个元素上的时候触发 |
| ondragleave | 拖拽时鼠标指针离开某个元素的时候触发，相当于onmouseout事件 |
| ondrop | 拖拽结束，放置元素时触发 |
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>触发拖放事件</title>
<style>
#box{
width:340px;
height:250px;
border:1px solid black;
}
</style>
</head>
<body>
<img src="../img/a.jpg" alt="" id="img1" draggable="true">
<div id="box"></div>
<script>
// 获取元素
var oImg=document.getElementById("img1");
var oBox=document.getElementById("box");
// 拖拽元素事件
// 拖拽开始
oImg.ondragstart=function(ev){
ev.dataTransfer.setData("text/plain", ev.target.src); // 设置数据类型和数据
this.style.border="1px solid red";
};
// 拖拽的时候
oImg.ondrag=function(ev){
document.title="ok";
};
// 拖拽结束
oImg.ondragend=function(){
this.style.border="none";
};
// 目标元素事件
// 进入目标元素
oBox.ondragenter=function(){
this.style.background="skyblue";
};
// 拖拽到目标元素
oBox.ondragover=function(ev){
// 要想触发drag事件，就必须在dragover事件中阻止默认行为
ev.preventDefault();
};
// 离开目标元素
oBox.ondragleave=function(){
this.style.background="orange";
};
// 在目标元素中释放
oBox.ondrop=function(ev){
var data = ev.dataTransfer.getData("text/plain"); // 获取数据
var img = new Image(); // 创建一个新的Image对象
img.src = data; // 设置图片源为拖拽的数据（即图片的URL）
this.appendChild(img); // 将图片添加到目标元素中
alert("success!"); // 弹出成功提示框
}
</script>
</body>
</html>
运行结果:
dataTransfer对象
dataTransfer 对象用于从被拖拽元素向目标元素传递字符串格式的数据
setData()方法
语法：以指定格式给 dataTransfer 对象赋予数据。
要解决Firefox下的拖放问题，必须设置 setData()方法，才可以拖放除图片之外的其他标签。
语法格式：
setData(sFormat,sData);
说明如下：
- sFormat属性定义数据的格式，也就是数据的类型
- sData 属性为待赋值的数据
getData()方法
语法：从 dataTransfer 对象中获取数据，根据 key，获取相应的value
语法格式如下：
getData(sFormat);
sFormat属性代表数据格式，用来保存数据类型的字符串，取值时 text 或 URL
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dataTransfer对象</title>
<style>
#box{
width:340px;
height:250px;
border:1px solid black;
}
</style>
</head>
<body>
<img src="../images/p1.jpg" alt=""id="img">
<div id="box"></div>
<script>
// 获取元素
var oImg=document.getElementById("img");
var oBox=document.getElementById("box");
// 方法
oImg.ondragstart=function(ev){
ev.dataTransfer.setData("text",ev.target.id);
}
oBox.ondragover=function(ev){
ev.preventDefault();
}
// 在目标元素中释放
oBox.ondrop=function(ev){
var mydata=ev.dataTransfer.getData("text");
ev.target.append(document.getElementById(mydata));
}
</script>
</body>
</html>
运行结果:
