js高级技巧拖放

拖放:点击某个对象,并按住鼠标按钮不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象“放”在某处。

涉及到event的对象的属性:

clientXclientY:当事件被触发时鼠标指针相对于浏览器页面(或客户区)的坐标。

screenXscreenY:当事件发生时鼠标指针相对于屏幕的坐标。

offsetXoffsetY:当事件发生时鼠标指针相对于触发事件的元素内边界的坐标。

xy:当事件发生时鼠标指针相对于触发事件的元素外边界的坐标。

 

1.声明了一个对象DragDrop,该对象是一个单例对象,并使用了模块模式来隐藏某些实现细节。

2.该对象的使用:

     需要给元素加上draggable类,并将元素设为绝对定位

     然后再js中调用DragDrop对象的方法:DragDrop.enable();

3.拓展:

     为DragDrop对象添加了自定义事件,使得这个对象可以拥有事件。可以观察开始拖动,拖动过程中,停止拖动的几种状态

 

代码地址:https://github.com/xiaoxiaojing/practiseCode/blob/master/advancedSkills/drag.html

   注:代码中用到了event.js和custom_event.js。可以在这里获取。

参考书籍:《js高级程序设计》

原文地址:https://www.cnblogs.com/xiaoxiaojing/p/4019901.html