<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
500px;
height: 500px;
background-color: red;
}
img{
200px;
}
</style>
<script src="../js/事件.js"></script>
</head>
<body>
<img src="../img/春.jpg" alt="" draggable="true" >
<div >
拖拽
</div>
<div style="background-color: pink;50px;height:50px;" draggable="true">
哈哈
</div>
<script>
window.onload=function () {
var Img=document.getElementsByTagName("img")[0];
var Div=document.getElementsByTagName("div")[0];
var Div2=document.getElementsByTagName("div")[1];
var i=0;
Img.ondragstart=function (ev) {
// var ev=ev||window.event;
};
Div2.ondragstart=function (ev) {
ev.dataTransfer.setData("key","value"); // 设置数据 可以获拖拽的是哪呢 利用索引
ev.dataTransfer.effectAllowed="link"; // 设置鼠标样式
ev.dataTransfer.setDragImage(Img,0,0) ; // 指定拖拽的样式
};
Img.ondrag=function () {
document.title=i++;
};
Img.ondragend=function () {
};
Div.ondragenter=function () {
};
Div.ondragover=function (ev) {
ev.preventDefault(); //是目标位置可以进行拖拽放置
};
Div.ondrop=function (ev) {
// alert(ev.dataTransfer.getData("key"));
ev.stopPropagation(); //取消冒泡 解决火狐的自动生成新窗口
ev.preventDefault(); //取消默认行为
// 同网页的拖拽
// Div.innerHTML="";
// document.getElementsByTagName("body")[0].removeChild(Img);
// Div.appendChild(Img);
// 本地元素的拖拽
var fs=ev.dataTransfer.files; //获取拖拽的元素的集合
console.log(fs.length);
console.log(fs[0].type);
for(var i=0;i<fs.length;i++){
if(fs[i].type.indexOf("image")!=-1){
var fd=new FileReader(); // 读取文件信息
fd.readAsDataURL(fs[i]); // 读取文件
fd.onload=function () { // 读取成功
var Oimg=document.createElement("img");
Oimg.src=this.result;
Div.appendChild(Oimg)
}
}else{
alert("请上传图片")
}
}
};
Div.ondragleave=function () {
};
// ev.stopPropagation(); //阻止冒泡
// ev.preventDefault(); //阻止默认行为
// }
}
</script>
</body>
</html>
// 遇到问题 以上拖拽以图片为案例 涉及到兼容火狐浏览器 需要取消其默认行为 而且取消冒泡事件