HTML5 drag api 的使用
作者：互联网
一、基础概念
拖拽：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会失效，这个可能是浏览器的版本问题，以后浏览器不断更新可能会解决 注意：img标签，被选中的文字等都是自带可以拖拽的，如果元素是一个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>
标签：function,fr,console,log,对象,拖动,drag,api,HTML5 来源： https://www.cnblogs.com/liumingwang/p/14964351.html