一個超簡單的JS拖拽實現(xiàn)代碼(兼容IE,Firefox)

2019-11-21 00:36:29

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="http://m.survivalescaperooms.com/"/> <script type="text/javascript"> /** *取得元素的真實css屬性 *@param {Object} d 元素 *@param {String} a 元素的css屬性名 *@version 0.2 */ function gs(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } /** * 取得鼠標(biāo)坐標(biāo) * @return Position */ function getMouseLocation(e){ if(!document.all){ mouseX = e.pageX; mouseY = e.pageY; } else{ mouseX = event.x + document.body.scrollLeft; mouseY = event.y + document.body.scrollTop; } return {x:mouseX,y:mouseY}; } /** * 拖動對象 * @param {DOM Object} DOM對象 */ function drag(e,obj){ var p1 = getMouseLocation(e); var startRight = null; var startTop = null; var startLeft = null; var startBottom = null; var l = gs(obj,"left"); var r = gs(obj,"right"); var t = gs(obj,"top"); var b = gs(obj,"bottom"); if(!l) startRight = parseInt(r); else startLeft = parseInt(l); if(!t) startBottom = parseInt(b); else startTop = parseInt(t); if(obj.setCapture) obj.setCapture(); else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmousemove = function(e){ var p2 = getMouseLocation(e); var xMove = p2.x-p1.x; var yMove = p2.y-p1.y; if(!l) obj.style.right = (startRight - xMove)+"px"; else obj.style.left = (startLeft + xMove)+"px"; if(!t) obj.style.bottom = (startBottom - yMove)+"px"; else obj.style.top = (startTop + yMove)+"px"; } document.onmouseup = function(){ if(obj.releaseCapture) obj.releaseCapture(); else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmouseup = null; document.onmousemove = null; } } </script> <style type="text/css"> div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;width:200px;height:200px;cursor:pointer;} </style> </head> <body> <div   class="iwvjtn8m0"   id="test" onmousedown="drag(event,this)">拖我拖我拖我拖我拖我拖我拖我<div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

javascript支持firefox,ie7頁面布局拖拽效果代碼

上一篇：offsetParent 算法分析

下一篇：javascript encodeURI和encodeURIComponent的比較