js高级技巧---拖放
浏览数：48 /
时间：2015年06月09日
拖放：点击某个对象，并按住鼠标按钮不放，将鼠标移动到另一个区域，然后释放鼠标按钮将对象“放”在某处。
涉及到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高级程序设计》
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
