一、基础概念
拖拽:Drag 释放:Drop
1、拖拽指的是鼠标点击源对象后一直移动对象不松手,一但松手即释放了
2、源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等等
目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入这个区域,可以在这个区域上方悬停(未松手),可以释松手释放将源对象放置此处(已松手),也可以悬停后离开该区域。
二、拖拽API相关函数
被拖动的源对象可以触发的事件:
1、ondragstart 源对象开始被拖动
2、ondrag 源对象被拖动过程中(鼠标可能在移动也可能未移动)
3、ondragend 源对象被拖动结束
拖动对象进入到目标对象区域可以触发的事件
1、ondragenter 目标对象被源对象拖动着进入
2、ondragover 目标对象被源对象拖动着悬停在上方
3、ondragleave 源对象拖动着离开了目标对象
4、ondrop 源对象拖动着在目标对象上方释放/松手
三、如何在拖动的源对象事件和目标对象事件之间传递数据
HTML5为所有的拖动相关事件提供了一个新的属性
e.dataTransfer 数据传递对象(用于在源对象事件和目标对象事件之间传递数据)
源对象事件中保存数据:
e.dataTransfer.setData(k, v) k和v 都必须是string类型
目标对象上的事件处理中读取数据:
let v = emdataTransfer.getData( k )
四:案例
示例一:实现一个可以随着鼠标拖动而移动的效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0;
position: relative;
}
img{
position:absolute;
}
</style>
</head>
<body>
<img id="p3" src="img/p3.png" alt=""/>
<script>
p3.οndragstart=function(e){
console.log('事件源p开始拖动');
offsetX= e.offsetX;
offsetY= e.offsetY;
}
p3.οndrag=function(e){
console.log('事件源p拖动中');
var x= e.pageX;
var y= e.pageY;
console.log(x+'-'+y);
//drag事件最后一刻,无法读取鼠标的坐标,pageX和pageY都变为0
if(x==0 && y==0){
return; //不处理拖动最后一刻X和Y都为0的情形
}
x-=offsetX;
y-=offsetY;
p3.style.left=x+'px';
p3.style.top=y+'px';
}
p3.οndragend=function(){
console.log('源对象p拖动结束');
}
</script>
</body>
</html>
示例二:模拟电脑中 ”垃圾桶“的效果, 总共显示三个div方块,拖动着某个小方块到垃圾桶上方后,小方块从DOM树上删除
提示:删除需要从DOM子节点中删除元素,需要阻止ondragover的默认行为,利用源对象和目标对象的数据传递记录小方块的ID值!!!
注意:ondragover有一个默认行为,那就是当ondragover触发时,ondrop会失效,这个可能是浏览器的版本问题,以后浏览器不断更新可能会解决
注意:浏览器默认允许我们拖拽图像、选中文本以及链接,让其它元素被拖动也是可以实现的,例如元素是一个DIV,默认是不能拖拽的,所以要给DIV的属性设置draggable="true"开启可拖拽状态即可
如何阻止默认行为?
ondragover= function(e){ //源对象在悬停在目标对象上时
e.preventDefault(); //阻止默认行为,使得drop可以触发
.....
}
ondrop= function(e){ //源对象松手释放在了目标对象中
.....
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小喵咪喂给大黄鱼</title>
<style>
body{
text-align: center;
}
img{
width: 80px;
height: 80px;
border-radius:100%;
}
#fish{
width: 80px;
height: 80px;
margin-top: 200px;
opacity: .2;
background-color: yellow;
}
.cat{
width: 50px;
height: 50px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div class="cat" id="cat1" draggable="true" > </div>
<div class="cat" id="cat2" draggable="true" > </div>
<div class="cat" id="cat3" draggable="true" > </div>
<br>
<div id="fish" ></div>
</body>
<script>
//要想从数据库中删除猫咪,就需要猫咪的图片地址是后台传值过来的,然后循环遍历在页面中,当拖动删除的时候,删除掉数据库中的数据即可;然后刷新页面
var cat = document.getElementsByClassName('cat')//找到所有的猫咪
for(var i = 0;i<cat.length;i++){
var catSingle = cat[i];
catSingle.ondragstart = function(e){//循环遍历猫咪,当dragstart拖动开始的时候,setData设置他的id到e.dataTransfer中
console.log('e.dataTransfer',e.dataTransfer)
e.dataTransfer.setData('catId',this.id);
console.log('e.dataTransfer',e.dataTransfer)
}
}
fish.ondragenter = function(){//当如到鱼种时候,让鱼的透明度为1;
console.log('已经拖入')
fish.style.opacity ='1';
}
fish.ondragleave = function () {//拖动离开鱼的时候
console.log('拖动离开');
fish.style.opacity ='.2';
}
fish.ondragover = function (e) {//拖动悬浮在鱼上
e.preventDefault()
}
fish.ondrop = function(e){//拖动放开时候;获取拖动开始时候设置的数据;然后从dom结构中移除;
console.log('放开拖动')
fish.style.opacity = '.2'
var id = e.dataTransfer.getData('catId')
console.log(id)
var dragId = document.getElementById(id);
dragId.parentNode.removeChild(dragId)
}
</script>
</html>
示例二:将本地图片图拖动放置到浏览器中指定区域显示
相关知识点普及
1、HTML5新增文件操作对象
File 代表一个文件对象
FileList 代表一个文件列表对象,类数组
FileReader 用于从文件中读取数据
FileWrite 用于像文件中写数据
相关函数
div.ondrop = function(e){
var f = e.dataTransfer.files[0]; //找到拖放的文件
var fr = new FileReader(); //创建文件读取器
fr.readAsURLData(f); //读取文件内容
fr.onload = function(){ //读取完成
img.src = fr.result; //使用读取到的数据
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container {
border: 1px solid #aaa;
border-radius: 3px;
padding: 10px;
margin: 10px;
min-height: 400px;
}
</style>
</head>
<body>
<h3>拖动照片到下方方框区域</h3>
<div id="container"></div>
<script>
//监听document的drop事件——取消其默认行为:在新窗口中打开图片
document.ondragover = function(e){
e.preventDefault(); //使得drop事件可以触发
}
document.ondrop = function(e){
e.preventDefault(); //阻止在新窗口中打开图片,否则仍然会执行下载操作!!!
}
//监听div#container的drop事件,设法读取到释放的图片数据,显示出来
container.ondragover = function(e){
e.preventDefault();
}
container.ondrop = function(e){
console.log('客户端拖动着一张图片释放了...')
//当前的目标对象读取拖放源对象存储的数据
//console.log(e.dataTransfer); //显示有问题
//console.log(e.dataTransfer.files.length); //拖进来的图片的数量
var f0 = e.dataTransfer.files[0];
//console.log(f0); //文件对象 File
//从文件对象中读取数据
var fr = new FileReader();
//fr.readAsText(f0); //从文件中读取文本字符串
fr.readAsDataURL(f0); //从文件中读取URL数据
fr.onload = function(){
console.log('读取文件完成')
console.log(fr.result);
var img = new Image();
img.src = fr.result; //URL数据
container.appendChild(img);
}
}
</script>
</body>
</html>
五、拓展知识
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性