您现在的位置是：网站首页> 编程资料编程资料

AjaxUI：鼠标拖拽_AJAX相关_

2023-05-25 342人已围观

简介 AjaxUI：鼠标拖拽_AJAX相关_

<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><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>

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

您可能感兴趣的文章:

上一篇：用AJAX技术聚合RSS_AJAX相关_

下一篇：AjaxUI：滑动条_AJAX相关_

您现在的位置是：网站首页> 编程资料编程资料

AjaxUI：鼠标拖拽_AJAX相关_

相关内容

点击排行

本栏推荐

猜你喜欢