简易而又灵活的Javascript拖拽框架（四）

核心提示：本文示例源代码或素材下载 一、开篇似乎拖拽已经被写烂了，没得写的了，简易而又灵活的Javascript拖拽框架（四），可是我这次又来了～上一次写的是跨列拖放，这次我要带给大家的是跨页拖放，也是先计算所在的列，然后计算再这个列的位置，可以到这里来看看效果：示例效果说明：1、如果将方框拖动到页签上立刻释放掉的话，则

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

一、开篇

似乎拖拽已经被写烂了，没得写的了，可是我这次又来了～

上一次写的是跨列拖放，这次我要带给大家的是跨页拖放。

可以到这里来看看效果：示例效果

说明：1、如果将方框拖动到页签上立刻释放掉的话，则会被添加到该页的第一列的第一个位置；

2、如果将方框拖动到页签上并且停留片刻的话，则页面就会转换到该页，这个时候可以在页签上释放，也可以将方框拖动到此页的具体位置释放。

二、原理

我是在跨列拖放的基础上修改的代码，虽然仅仅是从跨“列”升级为跨“页“，但是这就意味着多了一个dimension。所以代码改动比较大，尤其是初始化的代码。

为了弄清楚代码中的命名同时也便于阐述原理，我画了下面的图

1、在拖动开始时，跟之前的跨列拖拽差不多，基本上不需要修改；

2、在拖动的过程中，就需要判断拖动module时的鼠标是否是在某个tab上，如果在tab上，则把dragGhost（拖动中占位的虚线框）隐藏了，并且设置转换页面的timeout（注意：这个timeout不要设置重复了，而且如果鼠标就在本页上就不需要设置），在设置这个timeout的响应函数也要小心，必须先把拖动的module放到新的页面然后再转换页面，因为鼠标虽然拖动了module，但是在html代码中，这个module还是属于原来的页面（只是因为position为absolute才让它游离出来的），如果原来的页面因为页面转换而变得不可见了，那么鼠标拖动的module也会不翼而飞的。

3、在拖动的过程中，如果鼠标不在某个tab上，首先要将timeout及时清除了，要不然在拖动时会莫名其妙的转换页面，剩下的跟页面内拖放是一样的计算方法来处理，也是先计算所在的列，然后计算再这个列的位置，在此不再累述。