please explain some of javascricpt code
This is an example of floating windows. I know that on click of mouse drag file function are called. Please explain what is the purpose of two divs and also in drag function uphandler and movehandler are used by function being dragged. Please explain what these functions do exactly, also what is the e and px symbol in these functions?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Floating Window</title>
<script src="Drag.js"></script>
</head>
<body>
<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a;">
<div style="padding-bottom:8px; width:400px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">
<div style="position:absolute; top:2px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Drag me!</div>
<div style="position:absolute; top:3px; left:377px; float:right;" onClick="this.parentNode.parentNode.style.display = 'none">
</div>
</div>
<br/>
<div style="margin-left:20px;">your content here...</div>
<div style="margin-left:30px;">your content here...</div>
<div style="开发者_开发知识库margin-left:40px;">your content here...</div>
<br/>
</div>
</body>
function beginDrag(elementToDrag, event){
var deltaX = event.clientX - parseInt(elementToDrag.style.left);
var deltaY = event.clientY - parseInt(elementToDrag.style.top);
if (document.addEventListener){
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent){
document.attachEvent("onmousemove", moveHandler);
document.attachEvent("onmouseup", upHandler);
}
else {
var oldmovehandler = document.onmousemove;
var olduphandler = document.onmouseup;
document.onmousemove = moveHandler;
document.onmouseup = upHandler;
}
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
function moveHandler(e){
if (!e) e = window.event;
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e){
if (!e) e = window.event;
if (document.removeEventListener){
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if (document.detachEvent){
document.detachEvent("onmouseup", upHandler);
document.detachEvent("onmousemove", moveHandler);
}
else {
document.onmouseup = olduphandler;
document.onmousemove = oldmovehandler;
}
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
}
I'm new to JavaScript but had done a lot of other programming language, so please don't bash me if i went slightly wrong
2 divs: it is just one of the HTML element, it is used to classify which part of HTML you are currently working on
uphandler: is a self-define function you've declare under your HTML body, I'm not quite sure what's the function does
and the same things as 'moveHandler' function, from the look of it, the moveHandler function is made to modify something on style or something
Hope that'll help
加载中,请稍侯......
精彩评论