javascript学习笔记之拖拽篇

最新推荐文章于 2024-05-05 21:10:47 发布

iteye_11428

最新推荐文章于 2024-05-05 21:10:47 发布

阅读量84

点赞数

分类专栏： JavaScript 文章标签： JavaScript Windows IE Firefox XP ViewUI

本文链接：https://blog.csdn.net/iteye_11428/article/details/81658664

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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"> //检测浏览器类型 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; } };
<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;
//检测操作系统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.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; } };
//删除事件处理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; };
//事件格式化，将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;
//获得事件对象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 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 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 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>
//判断是否在层里面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代码：

///
///

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