AjaxUI：鼠标拖拽

更新时间：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类及其方法********************/ //创建鼠标类 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需再刷新一下页面才能执行]

您可能感兴趣的文章:

AjaxUI：鼠标拖拽

ajax无刷新分页的简单实现
这篇文章主要为大家详细介绍了ajax无刷新分页的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
jQuery下的Ajax调试步骤
Ajax 可以为用户提供更为丰富的用户体验。jQuery 对 Ajax 当然也提供了很好的支持，而且还抽象了各种浏览器对于 Ajax 支持方面令人痛苦的差异。接下来，通过本篇文章给大家介绍jquery下的ajax调试步骤，感兴趣的朋友可以参考下
2015-09-09
Ajax获得站点文件内容实例不涉及服务器
选择一部著作，会通过 Ajax 实时获得相关的名字，一个简单的不涉及服务器的Ajax实例,需要的朋友可以参考下
2014-05-05
AjaxUI：鼠标拖拽
AjaxUI：鼠标拖拽...
2007-02-02
基于fileUpload文件上传带进度条效果的实例(必看)
下面小编就为大家带来一篇基于fileUpload文件上传带进度条效果的实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
ECSHOP中实现ajax弹窗登录功能
本文主要给大家介绍在ecshop中实现ajax弹窗登录功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
2017-03-03
利用Ajax实现在脚本里传值实例介绍
Ajax实现在脚本里传值可以解决实际上的一些问题，本文实现了一下，感兴趣的朋友可以参考下，希望可以帮助到你
2013-04-04
AJAX原理以及axios、fetch区别实例详解
前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch,下面这篇文章主要给大家介绍了关于AJAX原理以及axios、fetch区别的相关资料,需要的朋友可以参考下
2022-04-04
探秘ajax跨域请求
本文讲解的是怎么利用ajax实现跨域请求，那么知道“同源策略”，就可以解决很多疑问：“为毛我的ajax加载不了数据！”“为毛浏览器控制台会对我如此漂亮的代码报错！”这就是我们今天要主要探讨的内容了。
2015-03-03
ajax获取数据中文乱码问题最简单的完美解决方案
这篇文章主要介绍了ajax获取数据中文乱码问题最简单的完美解决方案,需要的朋友可以参考下
2014-11-11

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

AjaxUI：鼠标拖拽

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具