您的位置：首页 > Web前端 > JavaScript

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

2007-10-28 00:24 495 查看

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

[align=left] 最近在网上看到一些朋友到处找类似于google的个性主页和msn space的拖拽实现,在下正好也找到了一个例子.但是问题比较多.我将其改写并完善,建立了一个通用的函数.具体的函数实现如下:

<html>[/align]
[align=left]<head>[/align]
[align=left]<meta http-equiv="Content-Type" content="text/html; charset=gb2312">[/align]
[align=left]<title>BlackSoul的拖拽Demo</title>[/align]
[align=left][/align]
[align=left]<style type="text/css">[/align]
[align=left]body[/align]
[align=left]{[/align]
[align=left] margin:0px;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left]#aim /*设置目标层样式*/[/align]
[align=left]{[/align]
[align=left] position:absolute;/*控制层的位置所必须的style*/[/align]
[align=left] width:200px;[/align]
[align=left] height:30px;[/align]
[align=left] border:1px solid #666666;[/align]
[align=left] background-color:#FFCCCC;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left]#sourceLayer, #cloneLayer[/align]
[align=left]{[/align]
[align=left] position:absolute;/*控制层的位置所必须的style*/[/align]
[align=left] width:300px;[/align]
[align=left] height:50px;[/align]
[align=left] border:1px solid #666666;[/align]
[align=left] background-color:#CCCCCC;[/align]
[align=left] cursor:move;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].docked[/align]
[align=left]{[/align]
[align=left] display:none;[/align]
[align=left] filter:alpha(opacity=100);[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].actived[/align]
[align=left]{[/align]
[align=left] display:block;[/align]
[align=left] filter:alpha(opacity=70);[/align]
[align=left]}[/align]
[align=left]</style>[/align]
[align=left]</head>[/align]
[align=left] [/align]
[align=left]<body >[/align]
[align=left] [/align]
[align=left]<div id="aim">放置范围</div>[/align]
[align=left]<div id="sourceLayer" unselectable="off"><img src="http://blacksoul.gamenews.cn/mail.png" alt="拖拽Demo">拖拽Demo源</div>[/align]
[align=left]<div id="cloneLayer" class="docked" unselectable="off"></div>[/align]
[align=left] [/align]
[align=left]<script type="text/javascript" language="javascript">[/align]
[align=left][/align]
[align=left]</script>[/align]
[align=left]</body>[/align]
[align=left]</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:偶的博客园的第一篇文章.望多多支持.[/align]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航