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;
}

///

JS代码：

///

<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;
 }
};

//检测操作系统
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;

//添加事件处理
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;
 }
};

//删除事件处理
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;
 }
};

//事件格式化，将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;
};

//获得事件对象
EventUtil.getEvent = function (){
 if(window.event){
  return this.formatEvent(window.event);
 } else {
  return EventUtil.getEvent.caller.arguments[0];
 }
};
//定义变量，为了记录鼠标位置
var iDiffX = 0;
var iDiffY = 0;

//鼠标移动事件
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";
}

//鼠标按下事件
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);
}

//鼠标抬起时间
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";
 }
}

//判断是否在层里面
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代码：

///

<p><div id="div1" οnmοusedοwn="handleMouseDown(event)"></div></p>
<p><div id="divDropTarget"></div></p>