Visitors hit counter dreamweaver

JS 拖拽

  在看《Javascript：the Definitive Guide》，这是事件理那章的一个例题，照着打下来了，但还是很激动哦。第一次实现这功能。。。嘿嘿  发来纪念一下。不过还有个mouseup事件的removeEventListener没实现，就是mouseup时它没remove事件。。。不知道为什么耶，找不出原因。哪位高手知道的话指导下哈。

下面是JS代码，Drag.js

function drag(elementToDrag,event){
     var startX=event.clientX, startY=event.clientY;
         var origX=elementToDrag.offsetLeft, origY=elementToDrag.offsetTop;
         var deltaX=startX-origX, deltaY=startY-origY;
  if(document.addEventListener){
       elementToDrag.addEventListener("mousemove",moveHandler,true);
         elementToDrag.addEventListener("mouseup",upHandler,true);
    }
    else if(document.attachEvent){
              elementToDrag.setCapture(); //setCapture to capture the element
                    elementToDrag.attachEvent("onmousemove",moveHandler);
                    elementToDrag.attachEvent("onmouseup",upHandler);
                    elementToDrag.attachEvent("onlosecapture",upHandler);

    }
    else{ //IE4 Event Model
        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;
    }
   //This is the handler that captures mousemove events when an element 
     //is being dragging.It is responsible for moving the element
  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{
               elementToDrag.detachEvent("onlosecapture",upHandler);
                 elementToDrag.detachEvent("onmouseup",upHandler);
                 elementToDrag.detachEvent("onmousemove",moveHandler);
                 elementToDrag.releaseCapture();
            }
            if(e.stopPropagation) e.stopPropagation();
            else e.cancelBubble=true;
    }
}

下面是html：

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
    <SCRIPT type="text/javascript" src="Drag.js"></SCRIPT>
    <div style="position:absolute; left:100px; top:100px; width:250px;
                  background:white; border:solid black;">
    <div style="background:gray; border-bottom:dotted black; padding:3px; font-family:sans-serif;font-weight:bold;" onmousedown="drag(this.parentNode,event);">
          Drag Me
        </div>
        <p>This is a test. Testing,testing .</p>
        </div>
</head>
<body>
   
</body>
</html>

加油加油！


posted @ 2011-11-23 21:26  Jason Damon  阅读(1485)  评论(0)  编辑  收藏  举报