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" onmousedown="handleMouseDown(event)"></div></p>
<p><div id="divDropTarget"></div></p>
阅读更多

没有更多推荐了,返回首页