拖放
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin: 0; padding: 0; }
#a { width: 40px; height: 30px; position: absolute; background: #0ff; border:1px solid #f00; z-index:10; cursor: move; }
#a.move { border-style:dashed; }
#b { width: 300px; height: 200px; border:1px solid #00f; position: absolute; left:300px; }
</style>
<script type="text/javascript">
<!--
//事件绑定函数;
function addEvent(obj,evt,fn)
{
if(obj.attachEvent)
{
obj.attachEvent("on"+evt,fn);
}else if(obj.addEventListener)
{
obj.addEventListener(evt,fn,false);
}
}
function removeEvent(obj,evt,fn)
{
if(obj.detachEvent)
{
obj.detachEvent("on"+evt,fn);
}else if(obj.removeEventListener)
{
obj.removeEventListener(evt,fn,false);
}
}
//拖放类;
var Drag=function (elemID,targetID)
{
this.elem=document.getElementById(elemID);
this.targ=document.getElementById(targetID);
this.X=0;
this.Y=0;
var self=this;
//鼠标按下时的处理函数
var MouseDown=function ()
{
var evt=window.event||arguments[0];
self.X=evt.clientX-self.elem.offsetLeft;
self.Y=evt.clientY-self.elem.offsetTop;
addEvent(document,"mousemove",MouseMove);
addEvent(document,"mouseup",MouseUp);
}
//鼠标移动时的处理函数
var MouseMove=function ()
{
var evt=window.event||arguments[0];
self.elem.style.left=evt.clientX-self.X+"px";
self.elem.style.top=evt.clientY-self.Y+"px";
self.elem.className="move";
}
//鼠标松开时的处理函数
var MouseUp=function ()
{
var evt=window.event||arguments[0];
removeEvent(document,"mousemove",MouseMove);
removeEvent(document,"mouseup",MouseUp);
if(isOverDropTarget(evt.clientX,evt.clientY))
{
self.elem.style.left=self.targ.offsetLeft+"px";
self.elem.style.top=self.targ.offsetTop+"px";
}self.elem.className=self.elem.className.replace(/move/,"");
}
var isOverDropTarget=function (iX,iY)
{
var iX1=self.targ.offsetLeft;
var iX2=iX1+self.targ.offsetWidth;
var iY1=self.targ.offsetTop;
var iY2=iY1+self.targ.offsetHeight;
return (iX>=iX1&&iX<=iX2&&iY>=iY1&&iY<=iY2);
}
this.binding=function ()
{
addEvent(self.elem,"mousedown",MouseDown);
}
}
window.onload=function ()
{
var drag=new Drag("a","b");
drag.binding();
}
//-->
</script>
</head>
<body>
<div id="a"> </div>
<div id="b"> </div>
</body>
</html>
浙公网安备 33010602011771号