firefox下img元素和空div以及选中div中文字拖拽问题
最近在做拖拽功能的时候,FF下遇到了几个问题,自己顺便整理了一下。
问题:
在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一下。