zoukankan      html  css  js  c++  java
  • 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高级程序设计》

  • 相关阅读:
    CCF CSP 201403-2 窗口
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
  • 原文地址:https://www.cnblogs.com/xiaoxiaojing/p/4019901.html
Copyright © 2011-2022 走看看