firefox下img元素和空div以及选中div中文字拖拽问题
2013-03-11 10:53
288 查看
最近在做拖拽功能的时候,FF下遇到了几个问题,自己顺便整理了一下。
问题:
在Firefox下以图片为句柄的拖拽无法触发onmouseup事件,在空的div中也无法触发onmouseup事件,同时在所有浏览器下选中文字后div的mouseup事件失效;
整理了几个方法:
1.onmousemove加在document上
2.firefox : 如果被拖拽的对象里面没有任何内容,拖拽就会出现bug,我们只需要在down的最后加上一个return false
3.ie : 选择文字拖拽会有bug :setCapture
4.拖拽图片会有问题:return false;
注:setCapture的方法就在这里不多介绍了,可以google一下。
问题:
在Firefox下以图片为句柄的拖拽无法触发onmouseup事件,在空的div中也无法触发onmouseup事件,同时在所有浏览器下选中文字后div的mouseup事件失效;
整理了几个方法:
1.onmousemove加在document上
2.firefox : 如果被拖拽的对象里面没有任何内容,拖拽就会出现bug,我们只需要在down的最后加上一个return false
3.ie : 选择文字拖拽会有bug :setCapture
4.拖拽图片会有问题:return false;
window.onload = function() { var oDiv = document.getElementById('div1'); var oImg = document.getElementById('img1'); drag(oDiv); drag(oImg); function drag(obj) { obj.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - obj.offsetLeft; var disY = ev.clientY - obj.offsetTop; if (obj.setCapture) { obj.setCapture(); } document.onmousemove = function(ev) { var ev = ev || event; obj.style.left = ev.clientX - disX + 'px'; obj.style.top = ev.clientY - disY + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; if (obj.releaseCapture) { obj.releaseCapture(); } } return false; } } }
注:setCapture的方法就在这里不多介绍了,可以google一下。
相关文章推荐
- firefox下img元素和空div以及选中div中文字拖拽效果处理
- 35、JavaScript中DIV的完美拖拽---解决拖拽中的文字选中的问题
- 关于div中放入一个img元素导致div高度会多出几个像素的解决问题
- 如何解决div里面的h4标题拖拽,并且实现div里面的文本能够选中和不能选中的问题
- 取消页面中的图片拖拽效果以及取消文字的选中效果
- div拖拽时取消文字选中默认事件的解决方法
- 彻底解决网页文字无法选中以及复制的问题!!!(搜集整理)
- padding+div 在ie7、ie6以及firefox中的兼容问题
- 由img和div的间隙引出:line-height以及vertical-align的问题。
- padding+div 在ie7、ie6以及firefox中的兼容问题
- 关于div中放入一个img元素导致div高度会多出3px像素的解决问题
- 解决在Firefox中div子元素有浮动时div高度不会自动撑大的问题
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- 解决IE 下div与img重叠无法触发鼠标事件的问题
- Chrome 鼠标左键选中文字自动关闭的问题
- IE,firefox下jquery获取一组checkbox选中值的问题
- 魅族面试的一个问题,img是行内元素,为什么也可以设置框高?
- 在IE和FireFox中实现Flash背景透明和解决绝对定位元素被Flash遮住的问题
- a标签、img图片、iframe、表单元素、div
- 鼠标移动div时禁止选中div中的文字的方法