拖拽js和jq寫法

第一種原生js寫法

window.onload=function ()
{
	var oDrag=document.getElementById('drag');
	
	oDrag.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDrag.offsetLeft;//x座標
		var disY=oEvent.clientY-oDrag.offsetTop;//y座標
		
		document.onmousemove=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;//移動x座標位置
			var t=oEvent.clientY-disY;//移動y座標位置
			//限制範圍
			if(l<0)
			{
				l=0;
			}
			else if(l>document.documentElement.clientWidth-oDrag.offsetWidth)
			{
				l=document.documentElement.clientWidth-oDrag.offsetWidth;
			}
			
			if(t<0)
			{
				t=0;
			}
			else if(t>document.documentElement.clientHeight-oDrag.offsetHeight)
			{
				t=document.documentElement.clientHeight-oDrag.offsetHeight;
			}
			
			oDrag.style.left=l+'px';
			oDrag.style.top=t+'px';
		};
		
		document.onmouseup=function ()
		{
			document.onmousemove=null;
			document.onmouseup=null;
		};
	};
};

 第二種jQuery寫法

 

$(function(){
			$('#drag').mousedown(function (){
			var patch=parseInt($(this).css("height"))/2; /* 也能夠寫成var patch=parseInt($(this).css("width"))/2*/
			$(document).mousemove(function (event){
			var ox=event.clientX;
			var oy=event.clientY;
			var t=oy-patch;
			var l=ox-patch;
			var w=$(window).width()-$('#drag').width();
			var h=$(window).height()-$('#drag').height();
			if(t<0){
				t=0;
				}
			else if(t>h){
				t=h;
				}	
             if(l<0){
				 l=0;
				 }
			 else if(l>w){
			      l=w;		 
			     }
			$('.drag').css({top:t,left:l})
			})
			});
			$(document).mouseup(function (){
			$(this).unbind("mousemove");
			});  
		})