WEB开发网
开发学院网页设计JavaScript 简易而又灵活的Javascript拖拽框架(三) 阅读

简易而又灵活的Javascript拖拽框架(三)

 2010-09-14 13:24:20 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 一、开篇这是这个拖拽系列的第三篇了,第一篇简单的介绍了一下这个拖拽框架,简易而又灵活的Javascript拖拽框架(三),第二篇用这个框架做了一个Tab标签的拖放,这次用这个拖拽框架做一个更复杂一点的效果——跨列拖放,比较的对象是本列的所有对象(注意,遍历的时候

本文示例源代码或素材下载

一、开篇

这是这个拖拽系列的第三篇了,第一篇简单的介绍了一下这个拖拽框架,第二篇用这个框架做了一个Tab标签的拖放。这次用这个拖拽框架做一个更复杂一点的效果——跨列拖放。就像iGoogle和netvibes的个性页面布局那样。

简易而又灵活的Javascript拖拽框架(三)

二、原理

框架在第一篇做了介绍,这里直接使用。

首先要找到每个可以拖动的item,对于每个拖动的item,对其注册组件Drag.init(handle,dragBody);并且要把这个对象所在的列赋值给这个对象

还是分三个步骤说这个拖放的过程

1、鼠标拖动开始的时候,除了要将dragGhost放到当前被拖动的对象原来的位置上,还要记录每一列的左边距,当然还是要设置被拖动对象的position

简易而又灵活的Javascript拖拽框架(三)

2、鼠标拖动的过程中

先找到拖动对象是在哪一列,通过现在拖动对象的位置和在拖动开始时记录的列的左边距相比较,得出当前拖动对象在哪一列。

简易而又灵活的Javascript拖拽框架(三)

如果在原来那一列上,则不用管了,如果在别的列上,则将dragGhost插入到这个新的列中去(用column.appendChild插入到最后)。无论是本来就在这一列的元素还是从别的列拖过来的元素,都得让拖动对象与他所在的列的每一个元素的纵坐标相比较,得出应该在这一列的什么位置,将dragGhost插入(用column.insertBefore)。至于怎么找到拖动元素应该放在这一列的什么位置,这个原理和上边找列的原理差不多,只是比较的是纵坐标的值,比较的对象是本列的所有对象(注意,遍历的时候一定要排除dragGhost和本身,要不然在本列不能向下拖动)。

1 2  下一页

Tags:简易 灵活 Javascript

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接

热点阅读