推荐:怎么用javascript进行拖拽（5）
作者：雪山老人 来源：sohotx.com 发布时间：2007-09-21 20:14:00
Pulling It All Together
最后我们拥有了所有的drag/drop的脚本片断！下一个事情是我们将创建一个DOM处理．如果你不是很熟悉，请先阅读我的JavaScript Primer on DOM Manipulation.
下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面，它可以用户记录一个list(列表)，定为一个导航窗口在左边或者右边，或者更多的函数你可以想到的．
下一步我们将通过"假代码"让reader看到真代码，下面为推荐:
1、当document第一次载入时，创建dragHelper DIV.dragHelper将给移动的item加阴影．真实的item没有被dragged，只是用了insertBefor和appendChild来移动了，我们隐藏了dragHelper
2、有了mouseDown与mouseUp函数．所有的操作会对应到当到iMouseDown的状态中，只有当mouse左键为按下时iMouseDown才为真，否则为假．
3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器．任何参数(containers)将通过CreatedcragContainer进行重组与序列化，这样可以自由的移动．CreateDragContainer函数也将item进行绑定与设置属性．
4、现在我们的代码知道每个item的加入，当我们移动处mouseMove，mouseMove函数首先会设置变量target，鼠标移动在上面的item，如果这个item在容器中(checked with getAttribute):
运行一小段代码来改变目标的样式．创造rollover效果
检查鼠标是否没有放开，如果没有
设置curTarget代表当前item
记录item的当前位置，如果需要的话，我们可以将它返回
克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.
item拷贝到dragHelper后，原有的item还在鼠标指针下，我们必须删除掉dragObj，这样脚本起作用，dragObj被包含在一个容器中．
抓取容器中所有的item当前坐标，高度/宽度，这样只需要记录一次，当item被drag时，每随mouse移动，每移钟就会记录成千上万次．
如果没有，不需要做任何事，因为这不是一个需要移动的item
5、检查curTarget，它应该包含一个被移动的item,如果存在，进行下面操作：
开始移动带有阴影的item，这个item就是前文所创建的
检查每个当前容器中的container，是否鼠标已经移动到这些范围内了
我们检查看一下正在拖动的item是属于哪个container
放置item在一个container的某一个item之前，或者整个container之后
确认item是可见的
如果鼠标不在container中，确认item是不可见了．
6、剩下的事就是捕捉mouseUp的事件了
0
投稿猜你喜欢
- 这个问题困扰了我很长很长的时间，在跨域获取数据的时候就要用到服务器端的对象，以前一直用的是Msxml.XMLHTTP。但是问题太多了，特别严
- 今天写了一个放迅雷焦点广告的效果，还请大家多多指正，先附上效果图一张：相关文章：迅雷首页新闻图片轮播效果js源码首先是JS代码部分，之前一定
- 本游戏程序实现的功能为本地二人对弈中国象棋，实现语言为javascript+VML，在windows 2000 pro+IE 6sp1的环境
- JS是一段一段执行的（以<script>标签来分割），执行每一段之前，都有一个“预编译”，预编译干的活是：声明所有var变量（初
- Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、
做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。下面以 Tudou.com 的首页为例，总结总结。就制作而言，我- 用在产品内容展示的页面上，给产品图片加上提示工具条，鼠标移动图片上即可看到效果，效果还是不错的：带黑白效果和放大图片效果(by misshj
- 第一种，也是我最常用的,第一帧里加上这个比较灵活，想要自定义加入菜单，只要定义drMenu这个对象就可以了var drMenu&n
- MySQL的本地备份和双机相互备份脚本：首先，我们需要修改脚本进行必要的配置,然后以root用户执行。◆1. 第一执行远程备份时先用 fir
- 当然还是要使用FileSystemObject（FSO）来创建了。不过在创建前，要先检查以下目录是否存在，如果存在，就不用创建了：
- 如何验证IP地址？sub chkIP(boardid) dim rsIP dim ipAr
- 我相信站长们做网站的最终目的还是想要获得收入的，我想象站长们大部分的都做Google的联盟的，我相信站长中大部分的人都有考虑过做英文站的，但
- 要随机生成字符串代码如下：在MySQL中定义一个随机串的方法，然后再SQL语句中调用此方法。随机串函数定义方法：CREATE DEFINER
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- 最近关于HTML5吵得火热，很多人认为HTML5出现会秒杀Flash，以至于在各大web前端开 * 坛吵得不可开交。论坛里三言两语说的不够 尽
- 1、先介绍如何用PHP连上数据库（数据库用户名“root”，密码“sun”，有库“myguestbook”） 图62、PHP和My
- ASPJPEG组件是Persits出品的共享软件，试用期为30天，您可以在这里下载：http://www.persits.com/aspjp
- 之前就见过很多网站在侧边栏上使用<dl />标签对来完成侧边栏栏目的布局，最近在研究DEDECMS的默认模板时，也发现该模板在大
- 新一代W3C，xhtml代码规范，大家在设计网站的时候务必遵循这一规范 ，这将对网站的优化，网站的推广，搜索引擎的友好
- 它是第一个既能用于数据加密也能用于数字签名的算法。它易于理解和操作，也很流行。算法的名字以发明者的名字命名：Ron Rivest, Adi
