您的位置:首页 > 其它

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;

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一下。


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐