AjaxUI：鼠標(biāo)拖拽

更新時(shí)間：2007年02月13日 00:00:00 作者：

<!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類及其方法********************/ //創(chuàng)建鼠標(biāo)類 var Mouse=new Object(); //獲取鼠標(biāo)位置 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};     } } //鼠標(biāo)是否按下 Mouse.isDown=false; /*************************Element類及其方法***********************/ var Element=new Object(); //根據(jù)id獲取目標(biāo) 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;     } } //獲取元素的父節(jié)點(diǎn) Element.getElementParentNode=function(obj) {     try     {         return obj.parentNode;     }     catch (error)     {         alert("getElementParentNode():Element is undefined");         return null;     } } /***********************功能函數(shù)**************************/ //移動(dòng)函數(shù) //移動(dòng)可拖動(dòng)元素，并且在其接近目標(biāo)元素時(shí)使目標(biāo)元素的邊框現(xiàn)實(shí)為紅色。 function move(event,dragObj,targetElementAry) {     var event=event || window.event;     var obj=dragObj;     if(Mouse.isDown)     {         //計(jì)算可拖動(dòng)元素的x,y坐標(biāo).         var left=Mouse.getMousePosition(event).x-parseInt(obj.getAttribute("difX"));         var top=Mouse.getMousePosition(event).y-parseInt(obj.getAttribute("difY"));         //判斷可拖動(dòng)元素的x,y坐標(biāo)與目標(biāo)元素坐標(biāo)是否接近         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";             }         }         //設(shè)置可拖動(dòng)元素的x,y位置.         obj.style.top=top+"px";         obj.style.left=left+"px";     }      } //移動(dòng)函數(shù) //移動(dòng)前的準(zhǔn)備工作 //計(jì)算偏差,clone可拖動(dòng)元素并將其隱藏 //設(shè)置一些參數(shù) 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;     //計(jì)算偏差     var    difX=Mouse.getMousePosition(event).x-left;     var    difY=Mouse.getMousePosition(event).y-top;     //clone節(jié)點(diǎn)     dragObj.appendChild(obj.cloneNode(true));     //設(shè)置透明度     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";     //設(shè)置參數(shù)     dragObj.setAttribute("difX",difX); //偏差     dragObj.setAttribute("difY",difY);      dragObj.setAttribute("originTop",top); //原始目標(biāo)y坐標(biāo)     dragObj.setAttribute("originLeft",left); //原始目標(biāo)x坐標(biāo)     dragObj.setAttribute("originObj",obj.id); //原始目標(biāo)id     obj.style.display="none";     //標(biāo)記鼠標(biāo)為按下     Mouse.isDown=true;     //鼠標(biāo)移動(dòng)響應(yīng)     document.onmousemove=function(e){move(e,dragObj,targetElementAry);}; } //輔助函數(shù) //移除指定節(jié)點(diǎn)的所有子節(jié)點(diǎn) function removeNodeChild(obj) {     for(j=obj.childNodes.length-1;j>=0;j--)     {         obj.removeChild(obj.childNodes[j]);     } } //初始化 function init() {     //創(chuàng)建隱藏的拖動(dòng)層     var dragObj=document.createElement("div");     dragObj.setAttribute("id","dragDiv");     dragObj.style.cssText="position:absolute;top:0px;left:0px;display:none;";     document.body.appendChild(dragObj);     //創(chuàng)建目標(biāo)數(shù)組     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);         }     }     //添加事件     //檢查可移動(dòng)元素的位置和目標(biāo)元素的位置是否接近     //是，則將其移動(dòng)到目標(biāo)     //否，將其移動(dòng)到原始位置     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> <div   class="4yoy44c"   id="one" class="container"></div> <div   class="k4ea4ym"   id="two" class="container"></div> <div   class="w4wuqag"   id="three" class="container"></div> <div   class="maoc44c"   id="four"  class="container"></div> <div><div   class="6cikimi"   id="main">drag me</div></div> <p>在綠色方塊上按下鼠標(biāo)，可以將其拖動(dòng)，在方塊的位置靠近某個(gè)方框并且方框的邊線顯示紅色時(shí)，放開鼠標(biāo)，方塊會(huì)自動(dòng)進(jìn)入方框，其它位置放開鼠標(biāo)，方塊會(huì)返回上一次的位置。</p> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: