DIV拖动效果的实现。

//拖动实现。
var DD = function ($){
	var htmlObj = null;
	var ddObj = null;
	var top;
	var left;
	var _x;
	var _y;
	//鼠标按下的时候
	function _mouseDown(event){
		event = window.event || event;//IE的Event是全局事件,FF的不是
		//layerX/layerY:事件相对于当前坐标系的位移(FF，需要设置position属性为absolute或者relative方可用)
		//offsetX/offsetY:事件相对于当前父元素的位移(IE);
		_x = event.layerX || event.offsetX;
		_y = event.layerY || event.offsetY;
		
		htmlObj.style.cursor = "move";
		if(htmlObj.setCapture){
			htmlObj.setCapture();
			htmlObj.onmousemove = _mouseMove;
			htmlObj.onmouseup = _mouseUp;
		}else if(window.captureEvents){
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
			document.onmousemove = _mouseMove;
			document.onmouseup = _mouseUp;
		}
	}
	//鼠标释放的时候
	function _mouseUp(event){
		event = window.event || event;//IE的Event是全局事件,FF的不是
		htmlObj.style.cursor = "";
		if(htmlObj.releaseCapture){
			htmlObj.releaseCapture();
			htmlObj.onmousemove = null;
			htmlObj.onmouseup = null;
		}else if(window.captureEvents){
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
			document.onmousemove = null;
			document.onmouseup = null;
		}
	}
	//鼠标移动的时候
	function _mouseMove(event){
		event = window.event || event;//IE的Event是全局事件,FF的不是
		//pageX/pageY相对于网页的位移(FF)
		//clientX/clientY相对于可视窗口的位移(IE)
		var x = event.pageX || event.clientX;
		var y = event.pageY || event.clientY;
		
		//获取滚动条的坐标
		left = document.body.scrollLeft;
		top = document.body.scrollTop;
		
		
		//计算位置
		x = x - _x + left;
		y = y - _y + top;
		//当X和Y坐标小于0时，默认为0
		x = x < 0 ? 0 : x;
		y = y < 0 ? 0 : y;
		
		$(ddObj).css("top",y);
		$(ddObj).css("left",x);
		$(ddObj).fadeIn("fast");
	}
	
	function ddrag(onHtml,ddHtml){
		htmlObj = onHtml;
		ddObj = ddHtml;
		htmlObj.onmousedown = _mouseDown;
	}
	
	return {
		ddrag : ddrag
	};
}(jQuery);

 

 

说明：

onHtml:它为鼠标点击按下时的HTML对象

ddHtml：它为需要拖动的HTML对象。

一般默认onHtml为ddHtml的子元素。

 

调用方式：

DD.ddrag(document.getElementById("_title"),document.getElementById("showDescTextArea"));

 

 

HTML代码：

 

<div id="showDescTextArea" οnkeypress="escHideDiv(event)" style="display: none;position: absolute;background-color: #CCCCFF;border: thick double #CCCCFF;z-index: 10000">
			<h5 id="_title"></h5>
			<textarea rows="10" cols="50" name="_desc" id="_desc" ></textarea><br/>
			<input type="button" class="btn_width1111" value="确定" οnclick="ok()"/>	
			<input type="button" class="btn_width1111" value="取消" οnclick="hideDiv()"/>	
		</div>