js高级技巧---拖放

标签：style   http   color   io   使用   ar   sp   on   cti   

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

涉及到event的对象的属性：

clientX，clientY：当事件被触发时鼠标指针相对于浏览器页面（或客户区）的坐标。

screenX，screenY：当事件发生时鼠标指针相对于屏幕的坐标。

offsetX，offsetY：当事件发生时鼠标指针相对于触发事件的元素内边界的坐标。

x，y：当事件发生时鼠标指针相对于触发事件的元素外边界的坐标。

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高级程序设计》

js高级技巧---拖放

标签：style   http   color   io   使用   ar   sp   on   cti   

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