<!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=gb2312" /> <title>Untitled Document</title> <mce:style type="text/css"><!-- *{ margin:0;padding:0; } .drag{ width:100px;height:100px;border:1px solid #000;position:absolute;left:20px;top:20px; } .drag h1{ width:100%;height:30px;background:#000; } --></mce:style><style type="text/css" mce_bogus="1">*{ margin:0;padding:0; } .drag{ width:100px;height:100px;border:1px solid #000;position:absolute;left:20px;top:20px; } .drag h1{ width:100%;height:30px;background:#000; }</style> </head> <body> <div id="demo1" style="left:20px;top:20px;" class="drag"><h1></h1></div> <div id="demo2" style="left:250px;top:20px;" class="drag"><h1></h1></div> <div id="demo3" style="left:80px;top:140px;" class="drag"><h1></h1></div> <mce:script type="text/javascript"><!-- function getElementsByClassName(oElem, strTagName, strClassName){ var arrElements = (strTagName == '*' && oElem.all) ? oElem.all : oElem.getElementsByTagName(strTagName) ; var returnArrElements = new Array(); var oRegExp = new RegExp('(^|//s)' + strClassName + '($|//s)'); for(var i=0; i<arrElements.length; i++){ if (oRegExp.test(arrElements[i].className)){ returnArrElements.push(arrElements[i]); } } return (returnArrElements); } var init = false; var dx = 0; var dy = 0; var current = null; //var demo = document.getElementById('demo'); window.onload = function(){ var drags = getElementsByClassName(document.body,'div','drag'); for(var i=0,l=drags.length;i<l;i++){ (function(){ var drag = drags[i]; drag.onmousedown = function(e){ current = this; var ev = window.event || e; var left = ev.pageX ? ev.pageX : ev.clientX; var top = ev.pageY ? ev.pageY : ev.clientY; dx = left - parseInt(current.style.left); dy = top - parseInt(current.style.top); init = true; } document.onmousemove = function(e){ if(init == true){ var ev = window.event || e; var left = ev.pageX ? ev.pageX : ev.clientX; var top = ev.pageY ? ev.pageY : ev.clientY; current.style.left = (left - dx) + 'px'; current.style.top = (top - dy) + 'px'; current.getElementsByTagName('h1')[0].style.background = '#ff0000'; } } drag.onmouseup = function(){ init = false; current.getElementsByTagName('h1')[0].style.background = '#000'; dx = 0; dy = 0; } })(); } } // --></mce:script> </body> </html>