&#106avascript实现类似google和msn space的拖拽

google

     最近在网上看到一些朋友到处找类似于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="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:偶的博客园的第一篇文章.望多多支持.

http://blacksoul.cnblogs.com/archive/2006/03/31/363463.html

时间： 2024-10-27 01:20:38

&#106avascript实现类似google和msn space的拖拽的相关文章

仿Google和Windows Live的拖拽

提示:您可以先修改部分代码再运行 <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> body {     margin:10px; } #dragHelper {     position:absolute;/*重要*/     border:2px dashed #000000;     background-color:#FFFFFF;

仿Google和Windows Live的拖拽_javascript技巧

Cobao ........ - x 地址:http://www.cobao.cn 关键字: 说明: 新浪 ........ - x 地址:http://www.sina.com.cn 关键字: 说明: 网易 ........ - x 地址:http://www.163.com 关键字: 说明: QQ ........ - x 地址:http://www.qq.com 关键字: 说明:

即时桌面工具怎么开发？类似google launcher

问题描述 即时桌面工具怎么开发?类似google launcher 如题,如何开发google launcher这样的桌面工具.或者类似迅雷看看高清影视那样的桌面图标,点击后就可以看到很多影视资讯 解决方案 http://jingyan.baidu.com/article/f0062228d2dfa8fbd3f0c89f.html类似这个?

Ajax应用案例之MSN Space

ajax 我一直很推崇MSN Space的服务,对其相册服务和皮肤一直情有独钟.国内的播客,我首选MSN Space.也可能,MSN Space没有那么多炒作.  恩,言归正传.几天来研究一下MSN Space的Ajax应用.典型的,其应用主要体现在:网络日志的评论.固定链接.引用记录.自定义列表上面.了解Ajax之前,一直对其数据的获取方式很好奇.现在,大概略知一二了.如下图所示.  对于共享空间首页,"添加评论"."阅读评论"."固定链接".

Javascript实现类似google搜索框输入提示功能

本文主要内容:p居中.层定位.类google输入提示示例,在线qq查询,自动刷新 类似google搜索框输入提示功能的示例代码,采用层定位,居中对齐,input 的输入改变.失去焦点.获得焦点事件......解决了onblur和onclick同时被调用的失效问题.

轻松搭建你的个性化MSN Space

MSN Space是一个网络空间,只需几分钟,你就即可创建自己的MSN Space,可以在其中发布自己的感想.照片.音频和感兴趣的内容,从而与其他人进行交流.但MSN Spaces自身的功能还是有限,要想使你的空间更有个性,还需要借助其它工具才行.你想拥有自己个性化Msn Space吗?那就请跟我来吧! 一.创建空间 1.申请自己的Msn Space 访问Msn Space首页:http://spaces.msn.com(如图1) 单击"创建您的共享空间",进入图2显示的界面,如果你已

初用MSN Space技巧

MSN Space技巧-起步 1. 如何复制图片 在BLOG里面发表带图片的日志:在你选中的图片上点右键.选择复制.然后在你的日志发表编辑框相应的地方点,Ctrl+V粘贴,即可! 说明下.只可以复制网络上的图片的哦,你电脑上的图片是不可以 直接发表在上面的! 2 . 编辑网络日志项 单击"网络日志"选项卡/单击要编辑的项/进行所需更改/若要向您的网络日志发布此项,请单击"发布项"/您可以使用一些关键词组合,帮助您的网络日志项获得您想要的外观/用 SHIFT + EN

Zend Framework框架实现类似Google搜索分页效果_php实例

本文实例讲述了Zend Framework框架实现类似Google搜索分页效果.分享给大家供大家参考,具体如下: /** * * @param unknown_type $model 表类型 * @param unknown_type $ncontroller 那个控制器提交的controller * @param unknown_type $naction 那个action提交的action */ public function fenyepage2($model,$ncontroller,$

基于jQuery实现类似Google+圈子选择功能插件（支持键盘事件）

具体原理与调用不详述,可看代码注释及DEMO演示(演示中mod.udata.js里有一个汉字转拼音方法,它并不是插件的一部分,但为插件提供了拼音搜索的功能).  代码如下 复制代码 ;(function ($) {     /*      * 基于jQuery实现类似Google+圈子选择功能插件(支持键盘事件)@Mr.Think      */     $.fn.iChoose = function (options) {         var SELF=this;         var