javascript学习笔记之拖拽篇

CSS代码：

#div1 {   
    background-color:red;   
    height:150px;   
    width:150px;   
    position:absolute;   
    z-index:10000;   
}   
#divDropTarget {   
    background-color:blue;   
    height:200px;   
    width:200px;   
    position:absolute;   
    left:300px;   
} 
#div1 {
    background-color:red;
    height:150px;
    width:150px;
    position:absolute;
    z-index:10000;
}
#divDropTarget {
    background-color:blue;
    height:200px;
    width:200px;
    position:absolute;
    left:300px;
}
/////////////////////////////////////////////////////////////////////////// 
///////////////////////////////////////////////////////////////////////////
 
JS代码： 
JS代码：
 
/////////////////////////////////////////////////////////////////////////// 
///////////////////////////////////////////////////////////////////////////
 
<script type="text/javascript"><BR>//检测浏览器类型<BR>function Validate_Browser(str){<BR> var sUserAgent = navigator.userAgent;<BR> //先要验证是否是基于KHTML的<BR> var isKHTML = sUserAgent.indexOf("KHTML") >-1<BR>    || sUserAgent.indexOf("Konqueror") > -1<BR>    || sUserAgent.indexOf("AppleWebKit") > -1;<BR>    <BR> switch (str.toUpperCase()){<BR>  case "IE":<BR>   return sUserAgent.indexOf("MSIE")>-1 && sUserAgent.indexOf("compatible")>-1;<BR>   break;<BR>   <BR>  case "FIREFOX":<BR>   return sUserAgent.indexOf("Gecko")>-1 && !isKHTML;<BR>   break;<BR>   <BR>  case "NETSCAPE":<BR>   return sUserAgent.indexOf("Mozilla") == 0 <BR>     && navigator.appName == "Netscape"<BR>     && !isKHTML;<BR>   break;<BR>   <BR>  case "OPERA":<BR>   return sUserAgent.indexOf("Opera")>-1;<BR>   break;<BR>   <BR>  case "SAFARI":<BR>   return sUserAgent.indexOf("AppleWebKit") > -1 && isKHTML;<BR>   break;<BR>   <BR>  case "KONQUEROR":<BR>   return sUserAgent.indexOf("Konqueror") > -1 && isKHTML;<BR>   break;<BR>   <BR>  default: return false;<BR> }<BR>}; 
<script type="text/javascript">//检测浏览器类型function Validate_Browser(str){ var sUserAgent = navigator.userAgent; //先要验证是否是基于KHTML的 var isKHTML = sUserAgent.indexOf("KHTML") >-1    || sUserAgent.indexOf("Konqueror") > -1    || sUserAgent.indexOf("AppleWebKit") > -1;     switch (str.toUpperCase()){  case "IE":   return sUserAgent.indexOf("MSIE")>-1 && sUserAgent.indexOf("compatible")>-1;   break;     case "FIREFOX":   return sUserAgent.indexOf("Gecko")>-1 && !isKHTML;   break;     case "NETSCAPE":   return sUserAgent.indexOf("Mozilla") == 0      && navigator.appName == "Netscape"     && !isKHTML;   break;     case "OPERA":   return sUserAgent.indexOf("Opera")>-1;   break;     case "SAFARI":   return sUserAgent.indexOf("AppleWebKit") > -1 && isKHTML;   break;     case "KONQUEROR":   return sUserAgent.indexOf("Konqueror") > -1 && isKHTML;   break;     default: return false; }};
 
//检测操作系统<BR>function Validate_System(str){<BR> var sUserAgent = navigator.userAgent;<BR> //检测是不是WINDOWS系列的操作系统<BR>  var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");<BR>  if(str.toUpperCase() == "WIN")<BR>   return isWin;<BR>   <BR>  if(isWin) {<BR>   switch (str.toUpperCase()){<BR>    case "WIN95":<BR>     return sUserAgent.indexOf("Win95") > -1<BR>     || sUserAgent.indexOf("Windows 95") >-1;<BR>     break;<BR>     <BR>    case "WIN98":<BR>     return sUserAgent.indexOf("Win98") > -1<BR>     || sUserAgent.indexOf("Windows 98") >-1;<BR>     break;<BR>     <BR>    case "WINME":<BR>     return sUserAgent.indexOf("Win 9x 4.90") > -1<BR>     || sUserAgent.indexOf("Windows ME") >-1;<BR>     break;<BR>     <BR>    case "WIN2K":<BR>     return sUserAgent.indexOf("Windows NT 5.0") > -1<BR>     || sUserAgent.indexOf("Windows 2000") >-1;<BR>     break;<BR>     <BR>    case "WINXP":<BR>     return sUserAgent.indexOf("Windows NT 5.1") > -1<BR>     || sUserAgent.indexOf("Windows XP") >-1;<BR>     break;<BR>     <BR>    case "WINNT4":<BR>     return sUserAgent.indexOf("WinNT") > -1<BR>     || sUserAgent.indexOf("Windows NT") >-1<BR>     || sUserAgent.indexOf("WinNT4.0") > -1<BR>     || sUserAgent.indexOf("Windows NT 4.0") > -1<BR>     &&(<BR>     !(sUserAgent.indexOf("Win 9x 4.90") > -1<BR>     || sUserAgent.indexOf("Windows ME") >-1)<BR>     &&<BR>     !(sUserAgent.indexOf("Windows NT 5.0") > -1<BR>     || sUserAgent.indexOf("Windows 2000") >-1)<BR>     &&<BR>     !(sUserAgent.indexOf("Windows NT 5.1") > -1<BR>     || sUserAgent.indexOf("Windows XP") >-1)<BR>     );<BR>     break;<BR>    <BR>    default: return false;<BR>   }<BR>  }<BR> //检测是不是MAC操作系统<BR>  var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC");<BR>  if(isMac) {<BR>   switch (str.toUpperCase()) {<BR>    case "MAC68K":<BR>     return sUserAgent.indexOf("Mac_68000") > -1<BR>     || sUserAgent.indexOf("68K") > -1;<BR>     break;<BR>     <BR>    case "MACPPC":<BR>     return sUserAgent.indexOf("Mac_PowerPC") > -1<BR>     || sUserAgent.indexOf("PPC") > -1;<BR>     break;<BR>    <BR>    default: return false;<BR>   }<BR>  }<BR> <BR> //检测是不是UNIX操作系统<BR>  if(str.toUpperCase() == "UNIX")<BR>   return (navigator.platform == "Xll") && !isWin && !isMac;<BR>};<BR>//定义 EventUtil 对象<BR>var EventUtil = new Object; 
//检测操作系统function Validate_System(str){ var sUserAgent = navigator.userAgent; //检测是不是WINDOWS系列的操作系统  var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");  if(str.toUpperCase() == "WIN")   return isWin;     if(isWin) {   switch (str.toUpperCase()){    case "WIN95":     return sUserAgent.indexOf("Win95") > -1     || sUserAgent.indexOf("Windows 95") >-1;     break;         case "WIN98":     return sUserAgent.indexOf("Win98") > -1     || sUserAgent.indexOf("Windows 98") >-1;     break;         case "WINME":     return sUserAgent.indexOf("Win 9x 4.90") > -1     || sUserAgent.indexOf("Windows ME") >-1;     break;         case "WIN2K":     return sUserAgent.indexOf("Windows NT 5.0") > -1     || sUserAgent.indexOf("Windows 2000") >-1;     break;         case "WINXP":     return sUserAgent.indexOf("Windows NT 5.1") > -1     || sUserAgent.indexOf("Windows XP") >-1;     break;         case "WINNT4":     return sUserAgent.indexOf("WinNT") > -1     || sUserAgent.indexOf("Windows NT") >-1     || sUserAgent.indexOf("WinNT4.0") > -1     || sUserAgent.indexOf("Windows NT 4.0") > -1     &&(     !(sUserAgent.indexOf("Win 9x 4.90") > -1     || sUserAgent.indexOf("Windows ME") >-1)     &&     !(sUserAgent.indexOf("Windows NT 5.0") > -1     || sUserAgent.indexOf("Windows 2000") >-1)     &&     !(sUserAgent.indexOf("Windows NT 5.1") > -1     || sUserAgent.indexOf("Windows XP") >-1)     );     break;        default: return false;   }  } //检测是不是MAC操作系统  var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC");  if(isMac) {   switch (str.toUpperCase()) {    case "MAC68K":     return sUserAgent.indexOf("Mac_68000") > -1     || sUserAgent.indexOf("68K") > -1;     break;         case "MACPPC":     return sUserAgent.indexOf("Mac_PowerPC") > -1     || sUserAgent.indexOf("PPC") > -1;     break;        default: return false;   }  }  //检测是不是UNIX操作系统  if(str.toUpperCase() == "UNIX")   return (navigator.platform == "Xll") && !isWin && !isMac;};//定义 EventUtil 对象var EventUtil = new Object;
 
<BR>//添加事件处理<BR>EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler){<BR> if(oTarget.addEventListener) {//firefox<BR>  oTarget.addEventListener(sEventType, fnHandler, false);<BR> } else if(oTarget.attachEvent) {//IE<BR>  oTarget.attachEvent("on"+sEventType, fnHandler);<BR> } else {//others<BR>  oTarget["on" + sEventType] = fnHandler;<BR> }<BR>}; 
//添加事件处理EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler){ if(oTarget.addEventListener) {//firefox  oTarget.addEventListener(sEventType, fnHandler, false); } else if(oTarget.attachEvent) {//IE  oTarget.attachEvent("on"+sEventType, fnHandler); } else {//others  oTarget["on" + sEventType] = fnHandler; }};
 
<BR>//删除事件处理<BR>EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler){<BR> if(oTarget.removeEventListener) {//firefox<BR>  oTarget.removeEventListener(sEventType, fnHandler, false);<BR> } else if(oTarget.detachEvent) {//IE<BR>  oTarget.detachEvent("on"+sEventType, fnHandler);<BR> } else {//others<BR>  oTarget["on" + sEventType] = null;<BR> }<BR>}; 
//删除事件处理EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler){ if(oTarget.removeEventListener) {//firefox  oTarget.removeEventListener(sEventType, fnHandler, false); } else if(oTarget.detachEvent) {//IE  oTarget.detachEvent("on"+sEventType, fnHandler); } else {//others  oTarget["on" + sEventType] = null; }};
 
<BR>//事件格式化，将IE下的对象尽可能的调整为DOM的事件模型<BR>EventUtil.formatEvent = function(oEvent){<BR> var isIE = Validate_Browser("ie");<BR> var isWin= Validate_System("win");<BR> <BR> if(isIE && isWin){<BR>  oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keycode : 0;<BR>  oEvent.eventPhase = 2;<BR>  oEvent.isChar = (oEvent.charCode > 0);<BR>  oEvent.pageX = oEvent.clientX + document.body.scrollLeft;<BR>  oEvent.pageY = oEvent.clientY + document.body.scrollTop;<BR>  <BR>  oEvent.preventDefault = function(){<BR>   this.returnValue = false;<BR>  };<BR>  <BR>  if(oEvent.type == "mouseout"){<BR>   oEvent.relatedTarget = oEvent.toElement;<BR>  } else if (oEvent.Type == "mouseover") {<BR>   oEvent.relatedTarget = oEvent.fromElement;<BR>  }<BR>  <BR>  oEvent.stopPropagation = function(){<BR>   this.cancelBubble = true;<BR>  };<BR>  <BR>  oEvent.target = oEvent.srcElement;<BR>  oEvent.time = (new Date()).getTime();<BR> }<BR> return oEvent;<BR>}; 
//事件格式化，将IE下的对象尽可能的调整为DOM的事件模型EventUtil.formatEvent = function(oEvent){ var isIE = Validate_Browser("ie"); var isWin= Validate_System("win");  if(isIE && isWin){  oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keycode : 0;  oEvent.eventPhase = 2;  oEvent.isChar = (oEvent.charCode > 0);  oEvent.pageX = oEvent.clientX + document.body.scrollLeft;  oEvent.pageY = oEvent.clientY + document.body.scrollTop;    oEvent.preventDefault = function(){   this.returnValue = false;  };    if(oEvent.type == "mouseout"){   oEvent.relatedTarget = oEvent.toElement;  } else if (oEvent.Type == "mouseover") {   oEvent.relatedTarget = oEvent.fromElement;  }    oEvent.stopPropagation = function(){   this.cancelBubble = true;  };    oEvent.target = oEvent.srcElement;  oEvent.time = (new Date()).getTime(); } return oEvent;};
 
<BR>//获得事件对象<BR>EventUtil.getEvent = function (){<BR> if(window.event){<BR>  return this.formatEvent(window.event);<BR> } else {<BR>  return EventUtil.getEvent.caller.arguments[0];<BR> }<BR>};<BR>//定义变量，为了记录鼠标位置<BR>var iDiffX = 0;<BR>var iDiffY = 0; 
//获得事件对象EventUtil.getEvent = function (){ if(window.event){  return this.formatEvent(window.event); } else {  return EventUtil.getEvent.caller.arguments[0]; }};//定义变量，为了记录鼠标位置var iDiffX = 0;var iDiffY = 0;
 
//鼠标移动事件<BR>function handleMouseMove() {<BR> var oEvent = EventUtil.getEvent();<BR> var oDiv = document.getElementById("div1");<BR>//一定要加单位，奶奶的，不然FIREFOX下无效果<BR> oDiv.style.left = (oEvent.clientX - iDiffX)+"px";<BR> oDiv.style.top = (oEvent.clientY - iDiffY)+"px";<BR>} 
//鼠标移动事件function handleMouseMove() { var oEvent = EventUtil.getEvent(); var oDiv = document.getElementById("div1");//一定要加单位，奶奶的，不然FIREFOX下无效果 oDiv.style.left = (oEvent.clientX - iDiffX)+"px"; oDiv.style.top = (oEvent.clientY - iDiffY)+"px";}
 
//鼠标按下事件<BR>function handleMouseDown() {<BR> var oEvent = EventUtil.getEvent();<BR> var oDiv = document.getElementById("div1");<BR> iDiffX = oEvent.clientX - oDiv.offsetLeft;<BR> iDiffY = oEvent.clientY - oDiv.offsetTop;<BR> <BR> EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove);<BR> EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);<BR>} 
//鼠标按下事件function handleMouseDown() { var oEvent = EventUtil.getEvent(); var oDiv = document.getElementById("div1"); iDiffX = oEvent.clientX - oDiv.offsetLeft; iDiffY = oEvent.clientY - oDiv.offsetTop;  EventUtil.addEventHandler(document.body, "mousemove", handleMouseMove); EventUtil.addEventHandler(document.body, "mouseup", handleMouseUp);}
 
//鼠标抬起时间<BR>function handleMouseUp() {<BR> var oEvent = EventUtil.getEvent();<BR> EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove);<BR> EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp);<BR> if(isOverDropTarget(oEvent.clientX, oEvent.clientY)) {<BR>  alert("dropped!");<BR>  var oDiv = document.getElementById("div1");<BR>  var oTarget = document.getElementById("divDropTarget");<BR>  oDiv.style.left = oTarget.offsetLeft+"px";<BR>  oDiv.style.top = oTarget.offsetTop+"px";<BR> }<BR>} 
//鼠标抬起时间function handleMouseUp() { var oEvent = EventUtil.getEvent(); EventUtil.removeEventHandler(document.body, "mousemove", handleMouseMove); EventUtil.removeEventHandler(document.body, "mouseup", handleMouseUp); if(isOverDropTarget(oEvent.clientX, oEvent.clientY)) {  alert("dropped!");  var oDiv = document.getElementById("div1");  var oTarget = document.getElementById("divDropTarget");  oDiv.style.left = oTarget.offsetLeft+"px";  oDiv.style.top = oTarget.offsetTop+"px"; }}
 
//判断是否在层里面<BR>function isOverDropTarget(iX, iY) {<BR> var oTarget = document.getElementById("divDropTarget");<BR> var iX1 = oTarget.offsetLeft;<BR> var iX2 = iX1 + oTarget.offsetWidth;<BR> var iY1 = oTarget.offsetTop;<BR> var iY2 = iY1 + oTarget.offsetHeight;<BR> <BR> return (iX >= iX1 && iX <= iX2 && iY >= iY1 && iY <= iY2);<BR>}<BR></script> 
//判断是否在层里面function isOverDropTarget(iX, iY) { var oTarget = document.getElementById("divDropTarget"); var iX1 = oTarget.offsetLeft; var iX2 = iX1 + oTarget.offsetWidth; var iY1 = oTarget.offsetTop; var iY2 = iY1 + oTarget.offsetHeight;  return (iX >= iX1 && iX <= iX2 && iY >= iY1 && iY <= iY2);}</script>
 
  
 
 
/////////////////////////////////////////////////////////////////// 
///////////////////////////////////////////////////////////////////
 
HTML代码： 
HTML代码：
 
/////////////////////////////////////////////////////////////////// 
///////////////////////////////////////////////////////////////////
 
<p><div id="div1" onmousedown="handleMouseDown(event)"></div></p><BR><p><div id="divDropTarget"></div></p>