zoukankan      html  css  js  c++  java
  • 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一下。

  • 相关阅读:
    UVA 12284 Digital Matrix
    lightoj 1052
    light oj 1236
    light oj 1151
    省选准备 MISTAKE 大全
    我的省选 Day -15
    「FJ2014集训」采药人的路径
    【NOI2012】迷失游乐园
    寒假这十天
    计算几何 大杂烩
  • 原文地址:https://www.cnblogs.com/taoze/p/2953582.html
Copyright © 2011-2022 走看看