拖放:点击某个对象,并按住鼠标按钮不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象“放”在某处。
涉及到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高级程序设计》