拖拽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");

			});  

		})