欢迎使用Kit!
http://www.iteye.com/topic/1123335
?
?
Event.js里面,对于IE如果绑定的是drag类的事件,他做了两件事
1. 注册一个mousedown事件
2. 在mousedown事件里面执行元素的dragDrop方法
这两件事情很有意思,这样你就会惊喜的发现,在IE里面,原来不能拖动的block元素可以拖动了。一切就是这么的神奇。
相对于IE来说,其他的浏览器就显得简单了,只要支持HTML5的浏览器,我们只需要

设置元素的draggable属性为true即可拖动。
drop事件需要注意的是,必须要取消drop目标的dragOver默认事件,否则目标的drop事件不会触发,就像这样,全浏览器皆如此

以上的代码已经搞定了IE+高级浏览器的dragDrop事件了,现在唯一的问题就是
1. drag和drop是在不同元素上注册的事件,drag注册在拖动目标上,drop注册在需要drop的目标上。所以产生的EventObject不相同
2. 原生的drop事件,没有dragElement,他是通过事件的dataTranfer成员传递对象的,而dataTransfer成员是个剪贴板,只能保存String
所以肿么办?肿么办?
别急,如果你好好的看懂了我们上一篇介绍的KitJs高级事件管理的话,你一定会想到我们说的Event Object增强。
对,KitJs就是这么做的!
由于Js是单线程的,所以同一时间触发的drag事件,只有一个dragElement,利用这个特性,KitJs决定把这个dragElement引用保存在Event.js的实例中


上图的代码中,Kit注册了dragStart事件,将当前拖拽的元素,保存在Kit.Event实例kit.event里面
?
回顾上一篇,我们介绍了Kit的ev方法里面,会在托管事件的匿名函数中,给当前的EventObject合并一些额外的数据,来增强事件
Kit.Event采用同样的原理,而且KitEvent需要合并的数据更多,更可控,它自己保存了一个Event Object增强信息的数组,叫做eventExtraInfoFnArray,数组里面可以存放Function以及Map类型,用户可以通过暴露接口让用户自己选择给EventObject增强哪些数据,如果是Map,就直接mergeIf,如果是Function,就传入当前EventObejct,并执行Function,将返回值mergeIf

*Kit.Event重构了evExtra方法,原来在kit.js里面事件托管匿名函数中,用来增强Event Object,插入一些我们需要的额外信息的方法

?
因为dragDrop的执行顺序是drag->drop
所有只要有drag事件,触发,当前的dragElement就被保存在KitEvent实例中,这样到drop事件时,由于evExtra方法的缘故,KitEvent中的dragElement就被插入到drop事件的EventObject里面,这样在drop事件,既可以取到当前拖拽的元素了。
(当然,有人会问,按照这样的说法,kitEvent的dragElement岂不是一直被覆盖吗?就算没有发生drag事件,或者drag事件已经结束了,KitEvent的dragElement还存在吗?)
Kit会自己注册一个dragEnd事件,用于清除KitEvent的dragEleemnt以及相关的extraEventInfo
Kit通过注册dragStart事件,保存拖拽刚开始时候,拖拽元素的坐标信息
注册drag事件,获取鼠标移动的位移信息,根据之前的初始信息,移动元素的位置,实现拖拽
Demo:http://xueduany.github.com/KitJs/KitJs/demo/Dialog/demo.html
这里由于Firefox浏览器一向的垃圾以及BUG满天飞,Kit暂时无法获取FF下drag事件的鼠标移动数据,只有当dragEnd时,才能移动元素,敬请原谅。
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。 推荐链接抢购第四届中国云计算大会门票 想进外企,出国,跳槽,找工作?英语不好,快来充电吧
文章: 125积分: 230来自: 地球
文章: 34积分: 190来自: 南京
文章: 125积分: 230来自: 地球
?? 发表时间:2012-05-03?? xueduanyang 写道cuixiping 写道楼主的分享很有价值,楼主辛苦了。