js拖拽实例
实现代码如下
js：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">var params={ left:0, right:0, currentX:0, currentY:0, flag:false }; var getCss=function(o,key){ return o.currentStyle? o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key]; } var startDrag=function(bar, target){ if(getCss(target,'left')!==auto){//getCss(target,'left')!==auto)这句是什么意思啊？ params.left=getCss(target,'left'); //记录整体的这一块的位置 } if(getCss(target,'top')!==auto){ params.top=getCss(target,'top'); //记录整体的这一块的位置 } bar.onmousedown=function(event){ params.flag=true; //类似的打开开关的感觉。 var e=event; //将鼠标这值给一个变量。 params.currentX=e.clientX;//记录按下时鼠标指针位置相对于窗口客户区域的 x 坐标 params.currentY=e.clientY; } bar.onmouseup=function(event){ params.flag=false; if(getCss(target,'left')!==auto){ params.left=getCss(target,'left'); //记录下鼠标松开时的盒型的位置。 } if(getCss(target,'top')!==auto){ params.left=getCss(target,'top'); } } bar.onmouseover=function(event){ var e = event ? event: window.event;//这句什么意思啊？ if(params.flag){ var nowX=e.clientX;//记录鼠标按下时这个过程的鼠标位移,这个判断语句会让nowX到鼠标松开才不记录，所以这个值最后记录的是，松开的鼠标的值 var nowY=e.clientY; var disX= e.clientX-params.currentX; var disY= e.clientY-params.currentY; target.style.left=parseInt(params.currentX)+disX+'px'; target.style.top=parseInt(params.currentY)+disY+'px'; } } }; window.onload = function(){ var oBox = document.getElementById("box"); var oBar = document.getElementById("bar"); startDrag(oBar, oBox);} var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; //这里为什么改成点就不行。 //document.defaultView.getComputedStyle 这是w3c标准方法，取得元素的样式信息，因为有些样式是在外部css文件定义的，所以用element.style是取不到的 如果是IE,可以用 element.currentStyle["name"] };//拖拽的实现var startDrag = function(bar, target){ if(getCss(target, "left") !== "auto"){ params.left = getCss(target, "left"); } if(getCss(target, "top") !== "auto"){ params.top = getCss(target, "top"); } //o是移动对象 bar.onmousedown = function(event){ params.flag = true; if(!event){ event = window.event; //防止IE文字选中 bar.onselectstart = function(){ return false; } } var e = event; params.currentX = e.clientX; params.currentY = e.clientY; } bar.onmouseup = function(){ params.flag = false; if(getCss(target, "left") !== "auto"){ params.left = getCss(target, "left"); } if(getCss(target, "top") !== "auto"){ params.top = getCss(target, "top"); } } document.onmousemove = function(event){//这里跟写bar.onmousemove 有什么区别呢？ var e = event ? event: window.event; if(params.flag){ var nowX = e.clientX, nowY = e.clientY; var disX = nowX - params.currentX, disY = nowY - params.currentY; target.style.left = parseInt(params.left) + disX + "px"; target.style.top = parseInt(params.top) + disY + "px"; } } };window.onload = function(){ var oBox = document.getElementById("box"); var oBar = document.getElementById("bar"); startDrag(oBar, oBox);}</script><style>#box{ position:absolute; left:50px; top:150px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666; } #main { border:1px solid #a0b3d6; background:white; } #bar{ line-height:24px; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move; } #content{ width:420px; height:250px; padding:10px 5px; background:#F7F7F7; }</style></head><body><div id="box"> <div id="main"> <div id="bar">拖拽</div> <div id="content"> 内容…… </div> </div></div></body></html>