javascript实现类似google和msn space的拖拽

最新推荐文章于 2024-11-05 22:07:06 发布
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量925 收藏
点赞数
文章标签： javascript google function div filter border
javascript实现类似google和msn space的拖拽
      最近在网上看到一些朋友到处找类似于google的个性主页和msn space的拖拽实现,在下正好也找到了一个例子.但是问题比较多.我将其改写并完善,建立了一个通用的函数.具体的函数实现如下:

< html >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=gb2312">
< title > BlackSoul 的拖拽Demo</title>
<!--
 ____________________________________
|--------Author By BlackSoul---------|
|------------2006.03.30--------------|
|--------BlackSoulylk@gmail.com------|
|------------QQ:9136194--------------|
|------http://blacksoul.cnblogs.cn---|
======================================
-->
< style type="text/css">
body
{
    margin:0px;
}
 
#aim /* 设置目标层样式*/
{
    position:absolute;/* 控制层的位置所必须的style*/
    width:200px;
    height:30px;
    border:1px solid #666666;
    background-color:#FFCCCC;
}
 
#sourceLayer , #cloneLayer
{
    position:absolute;/* 控制层的位置所必须的style*/
    width:300px;
    height:50px;
    border:1px solid #666666;
    background-color:#CCCCCC;
    cursor:move;
}
 
.docked
{
    display:none;
    filter:alpha(opacity=100);
}
 
.actived
{
    display:block;
    filter:alpha(opacity=70);
}
</ style >
</ head >
 
< body >
 
< div id="aim"> 放置范围</div>
< div id="sourceLayer" unselectable="off"><img src="http://blacksoul.gamenews.cn/mail.png" alt=" 拖拽Demo"> 拖拽Demo源</div>
< div id="cloneLayer" class="docked" unselectable="off"></div>
 
< script type="text/javascript" language="javascript">
<!--
/*
 ====================================
|--------Author By BlackSoul---------|
|------------2006.03.30--------------|
|--------BlackSoulylk@gmail.com------|
|------------QQ:9136194--------------|
|------http://blacksoul.cnblogs.cn---|
 ====================================
*/
// 设置层对象
var aim;
var sourceLayer;
var cloneLayer;
 
// 定义各个层初始位置
var aimX;
var aimY;
var orgnX;
var orgnY;
 
// 拖拽过程中的变量
var draging = false; // 是否处于拖拽中
var offsetX = 0;     //X 方向左右偏移量
var offsetY = 0;     //Y 方向上下偏移量
var back;            // 返回动画对象
var thisX ;          // 当前clone层的X位置
var thisY ;          // 当前clone层的Y位置
var time ;
var stepX ;          // 位移速度
var stepY ;          // 位移速度
 
// 初始化拖拽信息
/*
 initAimX 目标x坐标
 initAimY 目标y坐标
 initOrgnX 拖拽源x坐标
 initOrgnY 拖拽源y坐标
*/
// 获得层对象
 
function getLayer(inAim,inSource,inClone)
{
    aim = document.getElementById(inAim);
    sourceLayer = document.getElementById(inSource);
    cloneLayer = document.getElementById(inClone);
}
 
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
    aimX = initAimX;
    aimY = initAimY;
    orgnX = initOrgnX;
    orgnY = initOrgnY;
    // 设置各个开始层的位置
    aim.style.pixelLeft = aimX;
    aim.style.pixelTop = aimY;
    sourceLayer.style.pixelLeft = orgnX;
    sourceLayer.style.pixelTop = orgnY;
    cloneLayer.style.pixelLeft = orgnX;
    cloneLayer.style.pixelTop = orgnY;
}
 
// 准备拖拽
function BeforeDrag()
{
    if (event.button != 1)
    {
        return;
    }
    cloneLayer.innerHTML = sourceLayer.innerHTML; // 复制拖拽源内容
    offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
    offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;
    cloneLayer.className = "actived";
    draging = true;
}
 
// 拖拽中
function OnDrag()
{
    if(!draging)
    {
        return;
    }
    // 更新位置
    event.returnValue = false;
    cloneLayer.style.pixelLeft = document.body.scrollLeft + event.clientX - offsetX;
    cloneLayer.style.pixelTop = document.body.scrollTop + event.clientY - offsetY;
}
 
// 结束拖拽
function EndDrag()
{
    if (event.button != 1)
    {
       return;
    }
    draging = false;
 
    if (event.clientX >= aim.style.pixelLeft && event.clientX <= (aim.style.pixelLeft + aim.offsetWidth) &&
        event.clientY >= aim.style.pixelTop && event.clientY <= (aim.style.pixelTop + aim.offsetHeight))
    {
        // 拖拽层位于目标中，自动定位到目标位置
        sourceLayer.style.pixelLeft = aim.style.pixelLeft;
        sourceLayer.style.pixelTop = aim.style.pixelTop;
         cloneLayer.className = "docked";
         /*
         **  这里完成之后可以用xml保存当前位置.
         **  下次用户进入的时候
         **  就初始化源拖拽层为xml当中的数据了    
         */
    }
    else
    {
    // 拖拽位于目标层外，将拖拽源位置复原
     thisX = cloneLayer.style.pixelLeft;
     thisY = cloneLayer.style.pixelTop;
     offSetX = Math.abs(thisX - orgnX);
     offSetY = Math.abs(thisY - orgnY);
     time = 500;// 设置动画时间
     stepX = Math.floor((offSetX/time)*20);
     stepY = Math.floor((offSetY/time)*20);
     if(stepX == 0)
         stepX = 2;
     if(stepY == 0)
         stepY = 2;
        
    // 开始返回动画
     moveStart();
    }   
}
 
 
function moveStart()
{
     back = setInterval("MoveLayer();",15);
}
 
// 设置返回的动画效果
function MoveLayer()
{
    // 位于目标左上
     if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
     {
         cloneLayer.style.pixelLeft += stepX;
         cloneLayer.style.pixelTop += stepY;
         // 如果位移超过目标则设置速度为pix.并向反方向回移.此处实现了弹簧效果.下同
         if(cloneLayer.style.pixelLeft > orgnX)
         {
              stepX = 1;
         }
         if(cloneLayer.style.pixelTop > orgnY)
         {
              stepY = 1;
         }
         // 在X或Y轴上坐标相同则不发生位移
         if(cloneLayer.style.pixelLeft == orgnX)
         {
              stepX = 0;
         }
         if(cloneLayer.style.pixelTop == orgnY)
         {
              stepY = 0;
         }
         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
         {
              EndMove();
         }
     }
    
     // 位于目标左下
     else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
     {
         cloneLayer.style.pixelLeft += stepX;
         cloneLayer.style.pixelTop -= stepY;
         if(cloneLayer.style.pixelLeft > orgnX)
         {
              stepX = 1;
         }
         if(cloneLayer.style.pixelTop < orgnY)
         {
              stepY = 1;
         }
         if(cloneLayer.style.pixelLeft == orgnX)
         {
              stepX = 0;
         }
         if(cloneLayer.style.pixelTop == orgnY)
         {
              stepY = 0;
         }
         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
         {
              EndMove();
         }
     }
    
     // 位于目标右上
     else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
     {
         cloneLayer.style.pixelLeft -= stepX;
         cloneLayer.style.pixelTop += stepY;
         if(cloneLayer.style.pixelLeft < orgnX)
         {
              stepX = 1;
         }
         if(cloneLayer.style.pixelTop > orgnY)
         {
              stepY = 1;
         }
         if(cloneLayer.style.pixelLeft == orgnX)
         {
              stepX = 0;
         }
         if(cloneLayer.style.pixelTop == orgnY)
         {
              stepY = 0;
         }
         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
         {
              EndMove();
         }
     }
    
     // 位于目标右上
     else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
     {
         cloneLayer.style.pixelLeft -= stepX;
         cloneLayer.style.pixelTop -= stepY;
         if(cloneLayer.style.pixelLeft < orgnX)
         {
              stepX = 1;
         }
         if(cloneLayer.style.pixelTop < orgnY)
         {
              stepY = 1;
         }
         if(cloneLayer.style.pixelLeft == orgnX)
         {
              stepX = 0;
         }
         if(cloneLayer.style.pixelTop == orgnY)
         {
              stepY = 0;
         }
         if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
         {
              EndMove();
         }
     }
    
     // 到达目标
     else
     {
         EndMove();
     }
}
 
// 停止返回动画
function EndMove()
{
         sourceLayer.style.pixelLeft = orgnX;
         sourceLayer.style.pixelTop = orgnY;
         cloneLayer.style.pixelLeft = orgnX;
         cloneLayer.style.pixelTop = orgnY;
         cloneLayer.className = "docked";
         clearInterval(back);
}
 
// 主拖拽函数
function startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
    getLayer(inAim,inSource,inClone)
    initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
    sourceLayer.onmousedown = BeforeDrag;
    document.onmousemove = OnDrag; // 这里如果用cloneLayer,在拖拽中会选中cloneLayer里面内容,进而出现一些bug...
    cloneLayer.onmouseup = EndDrag;   
}
 
// 调用
startDraging("aim","sourceLayer","cloneLayer",300,200,20,20);
//-->
</ script >
</ body >
</ html >

需要注意的是:
一.html里面对于div的定义需要有三个. 三个层都必须定义style的position为absolute,以便控制位置
    1.目标层(aim),主要作用是定义拖拽生效的位置.
    2.拖拽源(sourceLayer).注意设置属性unselectable = "off"(这里比较奇怪,设置成on范围会在拖拽过程中选中层内容)
    3.用于复制的层(cloneLayer).
二.函数的调用
    startDraging参数解释:
    initAim   目标层名称     initSource  拖拽源名称    initClone 用于复制的层的名称  
    initAimX  目标层x轴坐标  initAimY    目标层y轴坐标 initOrgnX 拖拽源x坐标        initOrgnY 拖拽源Y轴坐标

    仅IE里面测试通过.代码里面添加了注释.可以在拖拽源到达目标之后添加写xml的操作.进而记录用户自定义页面排版的数据.对于返回动画的算法还不是很满意.希望各位多多提些建议.以便完善.小弟当前致力于开发一套基于asp.net2.0的ajax控件.希望多多交流.

ps:偶的博客园的第一篇文章.望多多支持.
 
田猿笔记
关注
点点滴滴(JavaScript)
学海一粟
05-22 834
禁止选择    unselectable="on"(off): IE/Opera    style="-moz-user-select:none": FireFox(JS:element.style.MozUserSelect = "none";)    style="-khtml-user-select:none": Safari(JS:element.style.KhtmlUserSelect
禁止用户选中东西
闲谈
11-30 176
elem.setAttribute("unselectable" , "on"); elem.style.MozUserSelect = 'none'; elem.style.WebkitUserSelect =  'none';   elem.setAttribute('unselectable' , 'off'); elem.style.MozUserSelect = ''; el...
css3中user-select的用法详解
weixin_34318326的博客
12-19 465
css3中user-select的用法详解 user-select属性是css3新增的属性，用于设置用户是否能够选中文本。可用于除替换元素外的所有元素，以下是user-select的主要用法和注意事项的说明，更多信息可参考如下css3文档说明。 参考链接：http://www.css88.com/book/css/properties/...
实现商家google地图标注功能
吸星大法--吸百家武学之精华。大成也
09-21 1639
第一步:      打开网址 ditu.google.cn      在地图上面寻找一个地址，然后上下左右移动地图，让这个地址正好处于地图的正中心位置，当您想寻找坐标位置已经处于地图的中心位置的时候，拷贝并粘贴以下代码到你的浏览器地址栏： javascript:void(prompt('',gApplication.getMap().getCenter())); 然后回车一
javascript 拖动效果
weixin_34175509的博客
04-28 178
文章来源:http://jiarry.blogchina.com/4843957.html 关键词： javascript 拖动 拖拽 移动层 JavaScript中如何实现对层的控制，移动和拖动？现在个性化的界面越来越多，一个能随意拖放物件的个性化页面将会很受欢迎。随着WEB2.0的...
程序天下：JavaScript实例自学手册 电子教程+随书光盘
01-10 787
迅雷专用高速下载   程序天下：JavaScript实例自学手册.教程迅雷专用高速下载   程序天下：JavaScript实例自学手册.光盘 Eb4ethDC.jpg (36.02 KB)程序天下：JavaScript实例自学手册 电子教程+随书光盘2008-3-21 12:15本书涵盖了目前网络开发涉及的所有方向，从页面、文本、窗口、鼠标、日期时间等基本应用，到图像、滚动条、进度条、
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
程序天下:JavaScript实例自学手册
07-08
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 ...22.10 用JavaScript调用Google AdSense 22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
22.10 用JavaScript调用Google AdSense 22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 ...
最全面的C#开源项目介绍
weixin_33720078的博客
06-22 3475
一、AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架。Encase 独特的提供了把方面(aspects)部署到运行时代码，而其它AOP框架依赖配置文件的方式。这种部署方面(aspects)的方法帮助缺少经验的开发 人员提高开发效率。 NKalore是一款编程语言，它扩展了C#允许在.net平台使用AOP。NKalore的语法简单、直观，它的编译器...
前端面试题
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
JavaScript 生成二维码
qq_30049249的博客
11-02 219
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 438
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 101
vxe-grid新增空行，并且定位到空行位置。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 384
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
Vue2+3
m0_73557953的博客
11-04 73
创建Vue实例 Vue指令
手把手教你用JavaScript实现类似Google日历的控件
该控件的设计灵感来源于Google的日历，虽然在功能和视觉效果上可能不如原版，但重点在于通过实践学习和理解JavaScript日期选择器的实现原理。 首先，文档提供了一个HTML结构示例，包含一个div容器（id为'a'），其中...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值