FF下DIV的拖拉问题？？？IE 下是好用的

[luojihaidao]

说一下问题。首先我实现了DIv的拖动。
拖动程序：

//浏览器兼容代码
var isIE = document.all?true:false;
	function $(id){
		return 'string' == typeof id ? document.getElementById(id):id;
	}
	
	function addEventHandler(element,eventN,eventM){
		if(!element){
			return;
		}
		if(element.addEventListener){
			element.addEventListener(eventN,eventM,false);
		}else if(element.attachEvent){
			element.attachEvent('on'+eventN,eventM)
		}else{
			element['on'+eventN] = eventM;
		}
	}
	
	function removeEventHandler(element,eventN,eventM){
		if(!element){
			return;
		}
		if(element.removeEventListener){
			element.removeEventListener(eventN,eventM,false);
		}else if(element.detachEvent){
			element.detachEvent('on' + eventN,eventM);
		}else{
			element['on' + eventN] = null;
		}
	}
	var Class = {
		create:function(){
			return function(){
				this.initialize.apply(this,arguments);
			};
		}
	}
	Object.extend = function(des,source){
		for(var p in source){
			des[p] = source[p];
		}
		return des;
	};
	Object.getAbsoluteTop = function(obj){
		var top = 0;
		while(obj.tagName != "body"){
			top = obj.offsetTop;
			if(obj.parent){
				obj = obj.parent;
			}else{
				break;
			}
		}
		return top;
	}
	Object.getAbsoluteLeft = function(obj){
		var left = 0;
		while(obj.tagName != "body"){
			left = obj.offsetLeft;
			if(obj.parent){
				obj = obj.parent;
			}else{
				break;
			}
		}
		return left;
	}

//拖拉
	var Drag = Class.create();
	Drag.prototype = {
		initialize:function(obDrag,options){//obDrag 是拖拉对象. options是参数对象
			var oThis = this;
			this._drag = $(obDrag);
			if(isIE){
			//ie下用一个透明的层填充拖放对象 不填充的话onmousedown会失效(未知原因)
				(function(style){
					style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
				})(this._drag.appendChild(document.createElement("div")).style)
			}
			//this._isFlag = false;
			//事件点下鼠标(onmousedown)的X，Y位置;
			this._sX =  this._sY = 0;
			//事件对象(用于移除事件)
			this._FM = function(e){oThis.moveDrag(window.event || e);};
			this._FE = function(e){oThis.endDrag(window.event || e);};
			this.setOptions(options);
			addEventHandler(this._drag,'mousedown',function(e){oThis.startDrag(window.event || e);});
		},
		setOptions:function(options){
			var oThis = this;
			oThis._options = {
				limit:false,//是否有拖拉范围
				dUp:0,
				dLeft:0,
				dDown:document.body.offsetHeight,				
				dRight:document.body.offsetWidth
			};
			Object.extend(oThis._options,options || {});
			oThis._drag.style.position = "absolute";
			oThis._drag.style.cursor = "move";
		},
		startDrag:function(oEv){
			var oThis = this;
			//oThis._isFlag = true;
			oThis._sX = oEv.clientX - oThis._drag.offsetLeft;
			//alert(oThis._sX)
			oThis._sY = oEv.clientY - oThis._drag.offsetTop;
			//alert(oThis._sY)
			addEventHandler(document,"mousemove",oThis._FM);//oThis._drag也可以
			addEventHandler(document,"mouseup",oThis._FE);
			if(isIE){
				addEventHandler(oThis._drag,"losecapture",oThis._FE);
				oThis._drag.setCapture();
			}else{
				addEventHandler(window,"blur",oThis._FE);
			}
		},
		moveDrag:function(oEv){
			var oThis = this;			
			//设置位置
			//清除选择(ie设置捕获后默认带这个)
			window.getSelection && window.getSelection().removeAllRanges();
			var dLeft = oEv.clientX - oThis._sX,dTop = oEv.clientY - oThis._sY;
			if(oThis._options.limit && dLeft < oThis._options.dLeft){
				dLeft = oThis._options.dLeft;
			}
			if(oThis._options.limit && dLeft > oThis._options.dLeft + oThis._options.dRight - oThis._drag.offsetWidth){
				dLeft = oThis._options.dLeft + oThis._options.dRight - oThis._drag.offsetWidth;
			}
			if(oThis._options.limit && dTop < oThis._options.dUp){
				dTop = oThis._options.dUp;
			}
			if(oThis._options.limit && dTop > oThis._options.dUp + oThis._options.dDown - oThis._drag.offsetHeight){
				dTop = oThis._options.dUp + oThis._options.dDown - oThis._drag.offsetHeight;
			}
			oThis._drag.style.left = dLeft + 'px';
			oThis._drag.style.top = dTop + 'px';
			//预览函数
			oThis._options.onDrag && oThis._options.onDrag();
		},
		endDrag:function(oEv){
			var oThis = this;
			removeEventHandler(document,"mousemove",oThis._FM);
			removeEventHandler(document,"mouseup",oThis._FE);
			if(isIE){
				removeEventHandler(oThis._drag,"losecapture",oThis._FE);
				oThis._drag.releaseCapture();
			}else{
				removeEventHandler(window,"blur",oThis._FE);
			}
		}
	};

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> ImgCut </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src="js/imgCut.js"></script>
  <script type="text/javascript">

	function aa(){
		setImgCut("img","preview",null);
		document.getElementById("test");
		var drag = new Drag(document.getElementById("test"),null);

	}
  </script>
 </HEAD>

 <BODY onload="aa();">
 <div>
  <div id="test" style="border:1px solid red;width:200;height:200"><img src="1.jpg"></div>
 </BODY>
</HTML>

代码中的图片没有给出。
申明：<div id="test" style="border:1px solid red;width:200;height:200"><img src="1.jpg"></div> 中去掉图片：<div id="test" style="border:1px solid red;width:200;height:200">div> 在IE和FF上都能正常运行。
现在问题是当Div中有图片时IE下能正常运行 而FF下就有问题了：

一次拖拉操作：鼠标点下 -移动-再放开 onmousedown-onmousemove-onmouseup
当我完成一次拖拉操作时*（鼠标已经放开） 程序只执行了onmousedown-onmousemove onmouseup却没有响应（不知道为什么？FF下）这时鼠标虽然放但还处于onmousemove状态。移动鼠标（此时鼠标为松开状态）也可以拖动。

大家帮忙找找原因：

[不悲不喜]

与firefox默认的图像拖拽功能发生了冲突。
像下面这样改一下，取消默认动作就OK。

	startDrag:function(oEv){
		var oThis = this;

		if ( oEv.preventDefault )
		　　//阻止默认浏览器动作(W3C)
		　　oEv.preventDefault();
		else
		　　//IE中阻止函数器默认动作的方式
		　　window.event.returnValue = false;
		
		//oThis._isFlag = true;
		oThis._sX = oEv.clientX - oThis._drag.offsetLeft;
		//alert(oThis._sX)  
		oThis._sY = oEv.clientY - oThis._drag.offsetTop;
		//alert(oThis._sY)  
		addEventHandler(document,"mousemove",oThis._FM);  //oThis._drag也可以  
		addEventHandler(document,"mouseup",oThis._FE);

		if(isIE){
			addEventHandler(oThis._drag,"losecapture",oThis._FE);
			oThis._drag.setCapture();
		}
		else{
			addEventHandler(window,"blur",oThis._FE);
		}
	}, 

[cloudgamer]

对哦

[luojihaidao]

感谢8，9楼的回答。

[cloudgamer]

是不是没有释放选择
参考这里

[rjzou2006]

DIV的托动,可以使用jquery的插件.

[luojihaidao]

这个我看过了。你们把代码运行一下就知道是怎么会事了。

[luojihaidao]

[Quote=引用 1 楼 cloudgamer 的回复:]
是不是没有释放选择
参考这里
[/Quote]
这里的代码我看过了，他的拖拉div里面是没有图片的，我现在是把图片放到DIv中 ：<div><img></div>时出现的问题。。。

[cloudgamer]

原来这样
我还以为我那个已经包括了这个情况

[cloudgamer]

我再找了几个拖拽代码也是同样的问题

[luojihaidao]

先谢谢了。

[好记忆不如烂笔头abc]

收藏