`
mylose
  • 浏览: 8608 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

关于firefox下img元素拖拽效果处理

阅读更多
问题说明:
      Firefox下以图片为句柄的拖拽效果无法触发onmouseup事件

解决方法 :
      Firefox下Drag效果句柄不能作用在img元素上,解决有两种。
            1、 用一个div层盖住img
            2、 用非img元素作拖拽句柄
涉及概念总结:
      1、handle.onmousedown:      触发拖拽时间,并在事件中绑定move和up事件
      2、document.onmousemove: 鼠标移动事件,持续响应拖拽
      3、document.onmouseup:     拖拽结束即鼠标up事件,负责挂拖拽结束后的事件回调函数。
      4、因为拖拽的范围是整个浏览器所以move和up事件应该作用到document上。
      5、这里有联系事件捕捉概念,setCapture函数的作用就是将后续的mouse事件都发送给这个对象,releaseCapture就是将鼠标事件还回去。特别说明一下,在windows32位系统中,move事件是每个一个时间段检测一次鼠标位置,而非每次拖拽,所以如果不加setCapture函数很容易失去拖拽焦点,而且这并不保证一定出现,测试难度很大。
      6、clientX,clientY事件触发的坐标,这里持续跟踪鼠标拖拽。
      7、设置偏移量: 事件触发到句柄元素上,但往往不是句柄的0,0坐标,这是就引入偏移量问题,通过如下表达式计算出偏移量。
            evt.clientX-handle.offsetLeft;
            evt.clientY-handle.offsetTop;
      8、计算拖拽句柄的left和top,通过事件坐标减去偏移量就可以得到最终的拖拽方位了。
    handle.style.left=e.clientX-fx;
    handle.style.top=e.clientY-fy;
      9、在整个过程中你还应考虑事件冒泡和浏览器时间兼容
           getEvt:function(evt){
                return evt||window.event;
           },
           stopEvt:function(evt){
                Browser.isIE?(evt.cancelBubble=true):evt.stopPropagation();
           }           
     
并附上一个拖拽库,功能和效果不如dom-drag但是只有0.8k轻巧一些,30多行代码。

分享到:
评论

相关推荐

    javascript支持firefox,ie7页面布局拖拽效果代码

    javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm...

    js拖拽图片

    - `dragenter`、`dragover`:当拖动元素进入目标区域时触发,通常用于允许/禁止拖放到特定区域。 - `dragleave`:拖动元素离开目标区域时触发。 - `drop`:在目标区域释放元素时触发,实际的放置操作在这里...

    sortable 图片排序 ,拖拽

    Sortable库对现代浏览器有很好的支持,包括Chrome、Firefox、Safari、Edge和IE11。不过,对于不支持`draggable`特性的旧版浏览器,可能需要借助额外的polyfill库。 6. **与后端交互**: 在用户完成排序后,通常...

    html5拖拽上传.

    - **XMLHttpRequest对象**中的`sendAsBinary`方法(Firefox)或通过Google Gears模拟该方法(Chrome):用于发送文件数据。 目前,支持这些特性的浏览器包括Firefox 3.6及以上版本和Chrome 7及以上版本。 ##### ...

    HTML5 拖拽复制功能的实现

    需要注意的是,不同的浏览器可能对拖放功能的支持程度不同,例如IE9及以上版本、Firefox、Opera、Chrome和Safari都支持这一特性。在实际应用中,可能需要进行浏览器兼容性检查和处理。 除了基本的拖拽复制,还可以...

    JS可拖拽图片网格排列布局代码.zip

    - 确保代码在主流浏览器(如Chrome、Firefox、Safari、Edge等)中都能正常工作,考虑到旧版本和移动设备的兼容性。 总的来说,"JS可拖拽图片网格排列布局代码.zip"包含了一个使用JavaScript实现的可交互图片网格...

    zTree js css img包.zip

    5. **跨浏览器兼容**:zTree经过优化,能够在主流的浏览器如Chrome、Firefox、Safari、IE等上运行良好,确保了良好的跨平台兼容性。 6. **皮肤可定制**:通过CSS样式,开发者可以轻松地更改zTree的外观,适应不同的...

    详解Html5原生拖拽操作

    在H5中要想实现拖放操作,至少需要经过两个步骤:1) 将想要拖放的对象元素的draggable属性设为true(img与a元素默认允许拖放);2) 编写与拖放相关的事件处理代码。为了测试简便,我这里首先使用jQuery库完成拖拽的...

    ImageDrag:图片拖曳

    请将node_module的dnd.js文件夹的dist问价夹中的dnd.js替换成根目录下的dnd.js为避免img标签的默认属性,拖拽的图片尽量设置成背景图(对火狐浏览器的兼容)拖拽图片设置css样式的时候不要加给这个元素加父元素 ...

    html5 拖拽上传图片实例演示

    在示例中,首先检查浏览器是否支持拖放功能(如Safari和Firefox)。接着,设置拖放区域(drop zone)的事件监听器,如`dragenter`、`dragleave`、`dragover`和`drop`,这些事件用于控制拖放效果和处理文件。在`drop...

    拖放拖拽插件Draggin.js

    4. **兼容性**:虽然不支持IE,但Draggin.js对其他现代浏览器(如Chrome、Firefox、Safari、Edge等)提供了良好的支持,符合当前互联网环境的主流需求。 5. **CSS可定制化**:通过CSS,开发者可以轻松调整拖动元素...

    HTML5附件拖拽上传drop & google.gears实现代码

    因此,能够支持拖拽上传的浏览器主要包括Firefox 3.6+和Chrome 7+。 实现拖拽上传的步骤包括: 1. **绑定`drop`事件**:当用户将文件拖入指定区域时,触发该事件。 2. **获取`file`对象**:通过`drop`事件的`data...

    cropper.js

    - **兼容性**:cropper.js 兼容现代浏览器,包括Chrome、Firefox、Safari、Edge等,但可能不支持较老版本的IE。 4. **应用场景**: - 网络相册:用户可以上传照片并自行裁切,以达到理想的展示效果。 - 在线编辑...

    slidercontent_网页素材_源码.zip

    10. **跨浏览器兼容**:测试并确保滑动内容在主流浏览器(如Chrome、Firefox、Safari、Edge)中正常工作,对于开发者来说至关重要。 这个压缩包提供的源码可以作为学习和实践网页滑动内容设计和开发的实例,通过...

    HTML5 拖放(Drag 和 Drop)详解与实例代码

    大多数现代浏览器如Internet Explorer 9+、Firefox、Opera、Chrome和Safari支持HTML5的拖放功能。值得注意的是,Safari 5.1.2不支持拖放,而其他浏览器可能对某些拖放事件的触发频率有不同的处理,例如`ondragover`...

    图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传

    值得注意的是,ImgUploadJS插件目前仅支持IE11及以上,以及Chrome、Firefox和Safari等现代浏览器。对于不支持的浏览器,开发者可能需要提供降级方案或考虑其他兼容性更好的上传插件。 插件的工作原理主要依赖于...

    web前端笔试面试

    - **Gecko**: Firefox。 - **Trident/Blink**: IE/Edge (旧版)。 **7. HTML5的新特性、移除的元素及处理兼容性问题?** - **新特性**: 新增语义化标签(如`<header>`, `<nav>`)、多媒体标签(如`<video>`, `...

    个人主页模板HTML

    设计模板时,需确保它在各种浏览器(如Chrome、Firefox、Safari、Edge等)和不同版本中都能正常工作,这需要进行跨浏览器测试。 9. JavaScript和jQuery: 虽然标签中未提及,但许多个人主页模板会使用JavaScript...

Global site tag (gtag.js) - Google Analytics