html5拖拽一
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var img =$("#img").get(0);
var newDiv=$("#newDiv").get(0);
img.addEventListener("dragstart",img_dragstart,false);
newDiv.addEventListener("dragover",function(e){e.preventDefault();},false); // 默认行为阻止移动
newDiv.addEventListener("drop",img_drop,false);
/*
* dragstart 拖拽开始
* drag 过程
* dragend 结束
*
* dragenter 进入目标元素
* dragover 移动
* drop 放置
* dragleave 离开
* */
function img_dragstart(e){
var imgsrc= e.target.src;
//将地址保存进dataTransfer对象
e.dataTransfer.setData("text",imgsrc);
//设置鼠标图像
e.dataTransfer.setDragImage(e.target,0,0); // 0 0 为鼠标跟图像的坐标距离
}
function img_drop(e){
var src=e.dataTransfer.getData("text");
var img = new Image();
img.src=src;
e.target.appendChild(img);
//清空dataTransfer中的数据
e.dataTransfer.clearData("text");
e.preventDefault();
}
});
</script>
</head>
<body>
<div id="img" style="width:400px; height: 300px;border:1px solid red;">
<img id="img2" src="horse.png">
</div>
<div id="newDiv" style="width: 400px; height:300px; border: 1px solid green;"></div>
</body>
</html>
html5 拖拽详细版
html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style>
#srcDiv,#tarDiv{width:300px;height:500px;border:1px solid red;float:left;}
#srcDivTip{width:300px;height:150px;border:1px solid red;clear:both;float:left;}
#tarDivTip{width:300px;height:150px;border:1px solid red;float:left;}
</style>
<script src="drag_1.js"></script>
</head> <body>
<div id="srcDiv">
<img id="img" src="img/bike.jpg"/>
</div>
<div id="tarDiv"></div>
<div id="srcDivTip">
<div id="d_start"></div>
<div id="d_drag"></div>
<div id="d_end"></div>
</div>
<div id="tarDivTip">
<div id="d_enter"></div>
<div id="d_over"></div>
<div id="d_drop"></div>
<div id="d_leave"></div>
</div>
</body>
</html>
js
function $(id){
return document.getElementById(id);
}
function initial(){
//为img绑定事件:
//1、开始拖拽时:dragstart
//2、拖拽过程中:drag
//3、结束拖拽:dragend
//为tarDiv绑定事件(目标元素)
//1、第一次进入到目标元素:dragenter
//2、在目标元素内移动:dragover
//3、投放:drop
//4、源元素移出目标元素:dragleave
var img = $("img");
var tarDiv=$("tarDiv");
//绑定事件
img.addEventListener("dragstart",img_dragstart,false);
img.addEventListener("drag",img_drag,false);
img.addEventListener("dragend",img_dragend,false);
tarDiv.addEventListener("dragenter",tarDiv_dragenter,false);
tarDiv.addEventListener("dragover",tarDiv_dragover,false);
tarDiv.addEventListener("drop",tarDiv_drop,false);
tarDiv.addEventListener("dragleave",tarDiv_dragleave,false);
}
function tarDiv_dragleave(e){
$("d_leave").innerHTML="源元素已离开目标区域...";
e.preventDefault();
}
function tarDiv_drop(e){
$("d_drop").innerHTML="已经投放...";
//创建指定图像
/*var img = new Image();
img.src="img/flower.png"
e.target.appendChild(img);*/
var src=e.dataTransfer.getData("text");
var img = new Image();
img.src=src;
e.target.appendChild(img);
//清空dataTransfer中的数据
e.dataTransfer.clearData("text");
e.preventDefault();
}
function tarDiv_dragover(e){
var x=e.offsetX;
var y=e.offsetY;
$("d_over").innerHTML=x + ":" + y;
e.preventDefault();
}
function tarDiv_dragenter(e){
$("d_enter").innerHTML="已经进入到目标区域";
e.preventDefault();
}
function img_dragstart(e){
//阻止默认操作
//e.preventDefault();
$("d_start").innerHTML = "开始拖拽...";
$("d_end").innerHTML = "";
//获取图像路径
var imgSrc = e.target.src;
//将地址保存进dataTransfer对象
e.dataTransfer.setData("text",imgSrc);
//设置鼠标图像
e.dataTransfer.setDragImage(e.target,0,0);
}
function img_drag(e){
var x = e.pageX;
var y = e.pageY;
$("d_drag").innerHTML=x +":" + y;
}
function img_dragend(){
$("d_end").innerHTML="源元素拖放结束";
$("d_start").innerHTML = "已经结束了";
}
window.addEventListener("load",initial,false);
图片拖拽上传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片拖拽上传</title>
<style>
#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
oDiv.ondragenter = function(){
this.innerHTML = '可以释放啦';
};
oDiv.ondragover = function(ev){
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.innerHTML = '将文件拖拽到此区域';
};
oDiv.ondrop = function(ev){
ev.preventDefault();
var fs = ev.dataTransfer.files;
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 oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = this.result;
oLi.appendChild(oImg);
oUl.appendChild(oLi);
};
}
else{
alert('亲，请上传图片类型');
}
}
}; };
</script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>