OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

AjaxUI：鼠标拖拽

2022-2-5 17:02| 发布者: 菜鸟教程小白| 查看: 338| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: New Document 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 soli ...

<!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;     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[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 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> <p>在绿色方块上按下鼠标，可以将其拖动，在方块的位置靠近某个方框并且方框的边线显示红色时，放开鼠标，方块会自动进入方框，其它位置放开鼠标，方块会返回上一次的位置。</p> </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]