AjaxUI：鼠标拖拽

<！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[i]）.left; var targetTop=Element.getElementPosition（targetElementAry[i]）.top; if（Math.abs（left-targetLeft）<30&&Math.abs（top-targetTop）<30） { targetElementAry[i].style.borderColor="#f00"; } else { targetElementAry[i].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; varleft=Element.getElementPosition（obj）.left; vartop=Element.getElementPosition（obj）.top; //计算偏差 vardifX=Mouse.getMousePosition（event）.x-left; vardifY=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[i]）.left; var targetTop=Element.getElementPosition（targetElementAry[i]）.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> drag me 在绿色方块上按下鼠标，可以将其拖动，在方块的位置靠近某个方框并且方框的边线显示红色时，放开鼠标，方块会自动进入方框，其它位置放开鼠标，方块会返回上一次的位置。<br/> </BODY> </HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]