YUI 研究 -- DragDrop 模块

YUI的DragDrop模块提供了创建拖拽应用的框架,包括基础拖动、拖动柄、置顶、代理拖动等特性。DragDropMgr核心方法如fireEvents用于触发拖拽事件,handleMouseMove和handleMouseUp处理拖动过程,isOverTarget判断覆盖情况。拖动过程中涉及鼠标事件、元素位置计算以及事件触发策略,确保了拖动操作的顺畅和交互反馈的准确。
摘要由CSDN通过智能技术生成
例子
基础拖动
拖动柄
当前拖动元素置顶
代理拖动
自定义布局
组交互模式与盒子交互案例
固定区域内的拖动
圆形的拖动触发区域

YAHOO.util.DragDropMgr提供创建拖拽应用的框架

startX,startY
用于计算拖动的距离是否满足触发startDrop事件的条件。

deltaX,deltaY
记录mousedown事件相对于linked元素的位移,用于实现令拖动元素相对于鼠标静止移动的效果

dragOvers
通过此集合内容的变化能判断出当前DD对象与其它DD对象的交互情况( dragEnter、dragOver和dragOut

fireEvents(e, isDrop) 触发拖拽模块中的场景事件
它主要是通过判断当前DD对象和其它DD对象位置上的关系来触发当前DD对象的dragEnter、dragOver、dragOut、dragDrop和invalidDrop等事件;
在handleMouseMove和handleMouseUp方法中分别被调用。被
handleMouseUp方法调用时isDrop为真,此时当前DD只会触发dragDrop而不是 dragEnter或dragOver。当isDrop为假时反之。dragOut在两种情况下都有可能触发。
每次document上的mousemove和mouseup事件触发时都可能被调用,要注意其对性能的影响。

isOverTarget(pt, oTarget, intersect, curRegion) 判断oTarget当前是否被覆盖了
缓存 oTarget的linked元素的Region,useCache控制是否每次都重新计算一次Region;
如果当前拖动对象为空,或者交互模式是点模式而且没有任何区域限制,则返回pt是否在oTarget上;
否则,返回当前拖动元素在constraint和tick影响下的Region是否与oTarget有交集。


startDrag(x, y) 触发startDrag事件的方法
触发
当前DD对象的 b4StartDrag和startDrag事件。

stopDrag(e, silent) 触发endDrag事件的方法
触发b4EndDrag、endDrag和mouseUp事件;
清空“当前拖动对象”和“当前覆盖对象列表”两个状态。

handleMouseDown(e, oDD)
计算deltaX和deltaY的值;
创建一个timer,在一段时间后触发dragStart事件,这个时间默认是一秒。这个timer可能会在其它事件触发时被清除。

handleMouseMove(e) 在document范围中监听mousemove事件
当拖动时鼠标超出window边界时,调用handleMouseUp。在IE中当这种情况发生时,mousemove事件中的按键状态会从按下变成放开;但在其它浏览器中暂没方法检测这种情况;
利用startX和startY判断当前拖动的距离是否满足触发startDrag的条件;
触发当前DD对象的b4Drag、drag事件并调用fireEvents。

handleMouseUp(e) 在document范围中监听mouseup事件
不明白为什么如果startDrag事件通过handleMouseDown中创建的timer触发时,要先调用一次handleMouseMove。注释说是为了得到dragOver事件,但为什么要得到这个事件呢?
调用fireEvents方法;
触发endDrag事件。

getBes**tch(dds) 在dds中找到一个最适合的dd
首先看哪个DD是在光标下的;
如果没有DD在光标下的,则看那个DD与当前拖动DD
的相交面积最大。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值