一、基础概念
拖拽：Drag 释放：Drop
<!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" />
<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= 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>
原文：https://www.cnblogs.com/liumingwang/p/14964351.html