please explain some of javascricpt code_问答_开发者

开发者 https://www.devze.com 2023-02-10 00:48 出处：网络

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

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