<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta content-type="text/html" charset="gb2312"/>
<style type="text/css">
body{padding:0px;text-align:center;font:12px Arial;}
div.container{width:100px;height:100px;border:1px solid #000;margin:10px auto;}
div#main{width:99px;height:99px;border:1px solid #000;background:#050;color:#fff;font:12px Arial;margin:auto;}
p{text-algin:left;}
</style>
<script type="text/javascript">
/********************Mouse类及其方法********************/
//创建鼠标类
var Mouse=new Object();
//获取鼠标位置
Mouse.getMousePosition=function(event)
{
var event=event || window.event;
if(event.pageX)
{
return {x:event.pageX,y:event.pageY};
}
else
{
var x=event.clientX+document.body.scrollLeft-document.body.clientLeft;
var y=event.clientY+document.body.scrollTop-document.body.clientTop;
return {x:x,y:y};
}
}
//鼠标是否按下
Mouse.isDown=false;
/*************************Element类及其方法***********************/
var Element=new Object();
//根据id获取目标
Element.getElement=function(id)
{
var obj=document.getElementById(id);
if(obj)
{
return obj;
}
else
{
alert("getElement():no such Element");
return null;
}
}
//获取元素自身的尺寸
Element.getElementSize=function(object)
{
try
{
return {width:object.offsetWidth,height:object.offsetHeight};
}
catch (error)
{
alert("getElementSize():Element is undefined");
return null;
}
}
//获取元素的位置
Element.getElementPosition=function(object)
{
try
{
var left=0,top=0;
while(object.offsetParent)
{
left+=object.offsetLeft;
top+=object.offsetTop;
object=object.offsetParent;
}
return {left:left,top:top};
}
catch (error)
{
alert("getEelementPosition():Element is undefined");
return null;
}
}
//获取元素的父节点
Element.getElementParentNode=function(obj)
{
try
{
return obj.parentNode;
}
catch (error)
{
alert("getElementParentNode():Element is undefined");
return null;
}
}
/***********************功能函数**************************/
//移动函数
//移动可拖动元素，并且在其接近目标元素时使目标元素的边框现实为红色。
function move(event,dragObj,targetElementAry)
{
var event=event || window.event;
var obj=dragObj;
if(Mouse.isDown)
{
//计算可拖动元素的x,y坐标.
var left=Mouse.getMousePosition(event).x-parseInt(obj.getAttribute("difX"));
var top=Mouse.getMousePosition(event).y-parseInt(obj.getAttribute("difY"));
//判断可拖动元素的x,y坐标与目标元素坐标是否接近
for(i=0;i<targetElementAry.length;i++)
{
var targetLeft=Element.getElementPosition(targetElementAry).left;
var targetTop=Element.getElementPosition(targetElementAry).top;
if(Math.abs(left-targetLeft)<30&&Math.abs(top-targetTop)<30)
{
targetElementAry.style.borderColor="#f00";
}
else
{
targetElementAry.style.borderColor="#000";
}
}
//设置可拖动元素的x,y位置.
obj.style.top=top+"px";
obj.style.left=left+"px";
}
}
//移动函数
//移动前的准备工作
//计算偏差,clone可拖动元素并将其隐藏
//设置一些参数
function startDrag(event,dragObj,targetElementAry)
{
var event=event || window.event;
var obj=event.target || event.srcElement;
var left=Element.getElementPosition(obj).left;
var top=Element.getElementPosition(obj).top;
//计算偏差
var difX=Mouse.getMousePosition(event).x-left;
var difY=Mouse.getMousePosition(event).y-top;
//clone节点
dragObj.appendChild(obj.cloneNode(true));
//设置透明度
dragObj.childNodes[0].style.filter="alpha(opacity=50)";
dragObj.childNodes[0].style.opacity=0.5;
dragObj.style.left=left+"px";
dragObj.style.top=top+"px";
dragObj.style.display="block";
//设置参数
dragObj.setAttribute("difX",difX); //偏差
dragObj.setAttribute("difY",difY);
dragObj.setAttribute("originTop",top); //原始目标y坐标
dragObj.setAttribute("originLeft",left); //原始目标x坐标
dragObj.setAttribute("originObj",obj.id); //原始目标id
obj.style.display="none";
//标记鼠标为按下
Mouse.isDown=true;
//鼠标移动响应
document.onmousemove=function(e){move(e,dragObj,targetElementAry);};
}
//辅助函数
//移除指定节点的所有子节点
function removeNodeChild(obj)
{
for(j=obj.childNodes.length-1;j>=0;j--)
{
obj.removeChild(obj.childNodes[j]);
}
}
//初始化
function init()
{
//创建隐藏的拖动层
var dragObj=document.createElement("div");
dragObj.setAttribute("id","dragDiv");
dragObj.style.cssText="position:absolute;top:0px;left:0px;display:none;";
document.body.appendChild(dragObj);
//创建目标数组
var targetElementAry=new Array(Element.getElement("one"),Element.getElement("two"),Element.getElement("three"),Element.getElement("four"));
//添加事件
document.onmousedown=function(event)
{
var event=event || window.event;
var obj=event.target || event.srcElement;
if(obj.id=="main")
{
startDrag(event,dragObj,targetElementAry);
}
}
//添加事件
//检查可移动元素的位置和目标元素的位置是否接近
//是，则将其移动到目标
//否，将其移动到原始位置
document.onmouseup=function()
{
Mouse.isDown=false;
var left=parseInt(dragObj.style.left);
var top=parseInt(dragObj.style.top);
var index=-1;
for(i=0;i<targetElementAry.length;i++)
{
var targetLeft=Element.getElementPosition(targetElementAry).left;
var targetTop=Element.getElementPosition(targetElementAry).top;
if(Math.abs(left-targetLeft)<30&&Math.abs(top-targetTop)<30)
{
index=i;
}
}
if(index>-1)
{
var id=dragObj.getAttribute("originObj");
removeNodeChild(dragObj);
dragObj.style.display="none";
var obj=Element.getElement(id);
var node=obj.cloneNode(true);
var parent=Element.getElementParentNode(obj);
removeNodeChild(parent);
targetElementAry[index].appendChild(node);
targetElementAry[index].childNodes[0].style.display="block";
}
else
{
var id=dragObj.getAttribute("originObj");
dragObj.style.left=dragObj.getAttribute("originLeft")+"px";
dragObj.style.top=dragObj.getAttribute("originTop")+"px"
removeNodeChild(dragObj);
dragObj.style.display="none";
if(id)
{
Element.getElement(id).style.display="block";
}
}
}
}
window.onload=init;
</script>
</HEAD>
<BODY>
<div id="one" class="container"></div>
<div id="two" class="container"></div>
<div id="three" class="container"></div>
<div id="four" class="container"></div>
<div><div id="main">drag me</div></div>
在绿色方块上按下鼠标，可以将其拖动，在方块的位置靠近某个方框并且方框的边线显示红色时，放开鼠标，方块会自动进入方框，其它位置放开鼠标，方块会返回上一次的位置。
</BODY>
</HTML>