<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function handleDragDropEvent(event){
var text=document.getElementById("txt1");
text.value += event.type+"\n";
switch (event.type){
case "dragstart":
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("text","hello");
break;
case "dragover":
event.returnValue = false;
break;
case "dragenter":
event.dataTransfer.dropEffect = "move";
event.returnValue=false;
break;
case "drop":
event.returnValue = false;
(event.srcElement?event.srcElement:event.target).innerHTML=
event.dataTransfer.getData("text");
}
}
</script>
</head>
<body>
<form>
<p>
<img src="image/writer3.png" alt="image" width="100" height="100"
ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)" ondragend="handleDragDropEvent(event)" />
</p>
<div style="width: 200px;height: 200px;border: 1px solid #ff0000" ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)" ondragleave="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div>
<p> <!--此文本框用来观察事件触发顺序-->
<textarea cols="25" rows="10" id="txt1" readonly="readonly"></textarea>
</p>
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>drag event</title>
<style type="text/css">
body{
width: 100%;
height: 800px;
}
#div1{
background-color: #ff0000;
height: 100px;
width: 100px;
position: absolute;/*被拖动项要为绝对定位*/
}
#target{
width: 500px ;
height: 500px;
border: 1px solid #ff0000;
position: absolute;/*放置对象也要为决对定位*/
left: 500px;
}
</style>
<script type="text/javascript">
//定义可以拖放的对象
var diffX=0;
var diffY=0;
var oDiv;
var target;
window.onload=function(){
oDiv= document.getElementById('div1');//被拖动项
target=document.getElementById("target");//放置目标
}
function handleMouseMove(e){
oDiv.style.left=(e.clientX-diffX)+"px";
oDiv.style.top = (e.clientY-diffY)+"px";
}
function handleMouseDown(e){
diffX=e.clientX - oDiv.offsetLeft;
diffY=e.clientY - oDiv.offsetTop;
if(document.body.attachEvent){
document.body.attachEvent("onmousemove",handleMouseMove)
document.body.attachEvent("onmouseup",handleMouseUp);
}
else {
document.body.addEventListener("mousemove",handleMouseMove,false);
document.body.addEventListener("mouseup",handleMouseUp,false);
}
}
function handleMouseUp(e){
if(document.body.detachEvent){
document.body.detachEvent("onmousemove",handleMouseMove);
document.body.detachEvent("onmouseup",handleMouseUp);
}else{
document.body.removeEventListener("mousemove",handleMouseMove,false);
document.body.removeEventListener("mouseup",handleMouseUp,false);
}
if(isOverDropTarget(e.clientX,e.clientY)){
oDiv.style.left=target.offsetLeft+"px";
oDiv.style.top=target.offsetTop+"px";
}
}
//定义放置目标，先判断鼠标的坐标是否位于放置目标内
function isOverDropTarget(x,y){
var x1 = target.offsetLeft;
var x2 = x1+target.offsetWidth;
var y1 = target.offsetTop;
var y2 = y1+target.offsetHeight;
var isDragOver=x>=x1&&x<=x2&&y>=y1&&y<=y2;
return(isDragOver);
}
</script>
</head>
<body>
<p>try mocing your mouse</p>
<div id="div1" onmousedown="handleMouseDown(event);"></div>
<div id="target"></div>
</body>
</html>原文地址：http://blog.csdn.net/ruoyiqing/article/details/39252269
