[JavaScript]简易而又灵活的Javascript拖拽框架(二)

一、开篇

在上一篇中,似乎不出来这个框架有多强大。是因为我们实现的效果太简单了,还不足以体现框架的强大和灵活,在这一节中,用这个灵活的框架轻易的来实现拖放!

 

二、原理

 

框架的原理在上一篇文章中介绍了,这里就不在重复,直接开始使用这个框架了

首先通过Drag.init来注册拖动组件;

分析:

1、拖动开始的时候

dragGhost插入到鼠标拖动的那个元素,鼠标拖动的元素的positionabsolute

dragGhost为拖动过程中指示拖动元素的当前位置的元素

2、拖动正在进行的时候

根据当前鼠标的位置或者正在被鼠标拖动的元素的位置 和需要排列的各种元素来比较,以确定将dragGhost放在哪个地方。

具体的分析,就是遍历拖动元素的各个兄弟元素,从第一元素起,一旦发现某个元素的xy比鼠标的xy大的话,则将dragGhost添加到这个元素之前。

3、拖动结束的时候

dragGhost替换为被拖动的元素,然后将dragGhost隐藏。

 

这样就让思路很清晰,不必再花精力去管元素是怎么随着鼠标走的,而且我们的却很精确的控制了整个拖放过程,所以说这个框架很强大很灵活

三、代码

Code

 

四、示例下载

      点此下载示例

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏