100分！拖动图片

一、把下边的代码放到HTML的<body></body>之间：<SCRIPT language=JavaScript>
drag = 0
move = 0
function init() {
    window.document.onmousemove = mouseMove
    window.document.onmousedown = mouseDown
    window.document.onmouseup = mouseUp
    window.document.ondragstart = mouseStop
}
function mouseDown() {
    if (drag) {
        clickleft = window.event.x - parseInt(dragObj.style.left)
        clicktop = window.event.y - parseInt(dragObj.style.top)
        dragObj.style.zIndex += 1
        move = 1
    }
}
function mouseStop() {
    window.event.returnValue = false
}
function mouseMove() {
    if (move) {
        dragObj.style.left = window.event.x - clickleft
        dragObj.style.top = window.event.y - clicktop
    }
}
function mouseUp() {
    move = 0
}
</SCRIPT>
<div id="block1" onmouseout="drag=0" onmouseover="dragObj=block1; drag=1;" style="height: 90; left: 200; position: absolute; top: 200; width: 90">
<dd><img alt border="0" src="你的图片.jpg" width="199" height="150"> </dd> </div>二、将<body>标签改为<body  onload="init()">即可

解决方案 »

  1.   

    跟拖动层一样
    http://fason.nease.net/code/js/mouse/layer.htm
      

  2.   

    <html>
    <head>
    <title>&Icirc;&THORN;±ê&Igrave;&acirc;&Icirc;&Auml;&micro;&micro;</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    <!--
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    // -->function MM_findObj(n, d) { //v4.0
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && document.getElementById) x=document.getElementById(n); return x;
    }function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
      //Copyright 1998 Macromedia, Inc. All rights reserved.
      var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
      if (!document.all && !document.layers) return false;
      retVal = true; if(!NS && event) event.returnValue = true;
      if (MM_dragLayer.arguments.length > 1) {
        curDrag = MM_findObj(objName); if (!curDrag) return false;
        if (!document.allLayers) { document.allLayers = new Array();
          with (document) if (NS) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
            for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
              with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
          } else for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
        curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
        curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
        curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
        curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
        curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
        curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
        curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
        curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
        curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
        curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
        curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
        document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
        if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
      } else {
        var theEvent = ((NS)?objName.type:event.type);
        if (theEvent == 'mousedown') {
          var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
          var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
          var maxDragZ=null; document.MM_maxZ = 0;
          for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
            var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
            if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
            var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
            if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
              var parentL=0; var parentT=0;
              if (!NS) { parentLayer = aLayer.parentElement;
                while (parentLayer != null && parentLayer.style.position) {
                  parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
                  parentLayer = parentLayer.parentElement; } }
              var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
              var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
              var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
              var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
              if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
                  || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
          if (curDrag) {
            document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
            curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
            curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
            MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
            document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
            if(curDrag.MM_toFront) {
              eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
              if (!curDrag.MM_dropBack) document.MM_maxZ++; }
            retVal = false; if(!NS) event.returnValue = false;
        } } else if (theEvent == 'mousemove') {
          if (document.MM_curDrag) with (document.MM_curDrag) {
            var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
            var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
            newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
            if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
            if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
            if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
            if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
            MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
            if (NS) {left = newLeft; top = newTop;}
            else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
            if (MM_dragJS) eval(MM_dragJS);
            retVal = false; if(!NS) event.returnValue = false;
        } } else if (theEvent == 'mouseup') {
          document.onmousemove = null;
          if (NS) document.releaseEvents(Event.MOUSEMOVE);
          if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
          if (document.MM_curDrag) with (document.MM_curDrag) {
            if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
                (Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
                 Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
              if (NS) {left = MM_targL; top = MM_targT;}
              else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
              MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
            if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
            if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
            retVal = false; if(!NS) event.returnValue = false; }
          document.MM_curDrag = null;
        }
        if (NS) document.routeEvent(objName);
      } return retVal;
    }
    //-->
    </script>
    </head><body bgcolor="#FFFFFF" text="#000000">
    <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1" onClick="MM_dragLayer('Layer1','',0,0,0,0,true,false,-1,-1,-1,-1,false,false,0,'',false,'')"><img src="ttnet/sinian/hua/1.gif" width="200" height="143"></div></body>
    </html>
      

  3.   

    这点代码很有用处，包括移动呀，固定位置呀多功能。
    <div ID="floater" style="left: 132px; top: 427px"> 
      <p align="center"><img  WIDTH="166" HEIGHT="146" style="background-color: #FF0000"></p>
    </div>
    <script LANGUAGE="JavaScript">
        self.onError=null;
        currentX = currentY = 0; 
        whichIt = null; 
        lastScrollX = 0; lastScrollY = 0;
        NS = (document.layers) ? 1 : 0;
        IE = (document.all) ? 1: 0;
        <!-- STALKER CODE -->
        function heartBeat() {
            if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
        if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
            if(diffY != lastScrollY) {
        percent = .1 * (diffY - lastScrollY);
        if(percent > 0) percent = Math.ceil(percent);
        else percent = Math.floor(percent);
                        if(IE) document.all.floater.style.pixelTop += percent;
                        if(NS) document.floater.top += percent; 
        lastScrollY = lastScrollY + percent;
        }
            if(diffX != lastScrollX) {
                percent = .1 * (diffX - lastScrollX);
                if(percent > 0) percent = Math.ceil(percent);
                else percent = Math.floor(percent);
                if(IE) document.all.floater.style.pixelLeft += percent;
                if(NS) document.floater.left += percent;
                lastScrollX = lastScrollX + percent;
            }    
        }
        <!-- /STALKER CODE -->
        <!-- DRAG DROP CODE -->
        function checkFocus(x,y) { 
        stalkerx = document.floater.pageX;
        stalkery = document.floater.pageY;
        stalkerwidth = document.floater.clip.width;
        stalkerheight = document.floater.clip.height;
        if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
        else return false;
        }
        function grabIt(e) {
            if(IE) {
                whichIt = event.srcElement;
                while (whichIt.id.indexOf("floater") == -1) {
                    whichIt = whichIt.parentElement;
                    if (whichIt == null) { return true; }
            }
                whichIt.style.pixelLeft = whichIt.offsetLeft;
            whichIt.style.pixelTop = whichIt.offsetTop;
                currentX = (event.clientX + document.body.scrollLeft);
                currentY = (event.clientY + document.body.scrollTop);     
            } else { 
        window.captureEvents(Event.MOUSEMOVE);
        if(checkFocus (e.pageX,e.pageY)) { 
        whichIt = document.floater;
        StalkerTouchedX = e.pageX-document.floater.pageX;
        StalkerTouchedY = e.pageY-document.floater.pageY;
        } 
            }
        return true;
        }
        function moveIt(e) {
            if (whichIt == null) { return false; }
            if(IE) {
            newX = (event.clientX + document.body.scrollLeft);
            newY = (event.clientY + document.body.scrollTop);
            distanceX = (newX - currentX); distanceY = (newY - currentY);
            currentX = newX; currentY = newY;
            whichIt.style.pixelLeft += distanceX;
            whichIt.style.pixelTop += distanceY;
                if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
                if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
                if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
                if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
                event.returnValue = false;
            } else { 
                whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
        if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
        if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
        if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
        if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
        return false;
            }
        return false;
        }
        function dropIt() {
            whichIt = null;
        if(NS) window.releaseEvents (Event.MOUSEMOVE);
        return true;
        }
        <!-- DRAG DROP CODE -->
        if(NS) {
            window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
            window.onmousedown = grabIt;
            window.onmousemove = moveIt;
            window.onmouseup = dropIt;
        }
        if(IE) {
            document.onmousedown = grabIt;
            document.onmousemove = moveIt;
            document.onmouseup = dropIt;
        }
        if(NS || IE) action = window.setInterval("heartBeat()",1);
        </script>
      

  4.   

    不行，请看<SCRIPT language=JavaScript>
    drag = 0
    move = 0
    function init() {
        window.document.onmousemove = mouseMove
        window.document.onmousedown = mouseDown
        window.document.onmouseup = mouseUp
        window.document.ondragstart = mouseStop
    }
    function mouseDown() {
        if (drag) {
            clickleft = window.event.x - parseInt(dragObj.style.left)
            clicktop = window.event.y - parseInt(dragObj.style.top)
            dragObj.style.zIndex += 1
            move = 1
        }
    }
    function mouseStop() {
        window.event.returnValue = false
    }
    function mouseMove() {
        if (move) {
            dragObj.style.left = window.event.x - clickleft
            dragObj.style.top = window.event.y - clicktop
        }
    }
    function mouseUp() {
        move = 0
    }
    </SCRIPT><form method="POST" action="t3.htm">
      <div id="block1" onmouseout="drag=0" onmouseover="dragObj=block1; drag=1;" style="height: 90; left: 200; position: absolute; top: 200; width: 90">
    <dd><img alt border="0" src="你的图片.jpg" width="199" height="150"> </dd> </div>
      
    </form>
      

  5.   

    <BODY><div id='1' style='position:absolute;left:50;top:50;'>
    <img src='http://www.csdn.net/images/homeimage/csdn.gif' name='1'>
    </div>
    <div id='2' style='position:absolute;left:200;top:200;'>
    <img src='http://www.csdn.net/images/homeimage/csdn.gif' name='1'>
    </div><script language="javascript">Wholething = (document.all) ? 0 : 1;
    var objectone;function MouseMovement(e) 
     {
    if (objectone) {
    if (Wholething) {
    objectone.moveTo((e.pageX-X), (e.pageY-Y));
     }
    else {
    objectone.pixelLeft = event.clientX-X + document.body.scrollLeft;
    objectone.pixelTop = event.clientY-Y + document.body.scrollTop;
    return false;
     }
     }
     }
    function MouseClickUp() {
    objectone = null;
     }if (Wholething) 
     {
    document.captureEvents(Event.mousedown | Event.mousemove | Event.mouseup);
     }function MouseClickDown(e)
     {
    if (Wholething) {
    objectone = document.layers[e.target.name];
    X=e.x;
    Y=e.y;
    return false;
     }
    else {
    objectone = event.srcElement.parentElement.style;
    X=event.offsetX;
    Y=event.offsetY;
     }
     }document.onmouseup = MouseClickUp;
    document.onmousedown = MouseClickDown;
    document.onmousemove = MouseMovement;
    </script>
    </BODY>
    </HTML>
      

  6.   

    http://expert.csdn.net/Expert/topic/1561/1561765.xml?temp=.7907221
      

  7.   

    <body  onload="init()">
    <SCRIPT language=JavaScript>
    drag = 0
    move = 0
    function init() {
        window.document.onmousemove = mouseMove
        window.document.onmousedown = mouseDown
        window.document.onmouseup = mouseUp
        window.document.ondragstart = mouseStop
    }
    function mouseDown() {
        if (drag) {
            clickleft = window.event.x - parseInt(dragObj.style.left)
            clicktop = window.event.y - parseInt(dragObj.style.top)
            dragObj.style.zIndex += 1
            move = 1
        }
    }
    function mouseStop() {
        window.event.returnValue = false
    }
    function mouseMove() {
        if (move) {
            dragObj.style.left = window.event.x - clickleft
            dragObj.style.top = window.event.y - clicktop
        }
    }
    function mouseUp() {
        move = 0
    }
    </SCRIPT>
    <div id="block1" onmouseout="drag=0" onmouseover="dragObj=block1; drag=1;" style="height: 90; left: 200; position: absolute; top: 200; width: 90"> 
    <form>
        <table width="100%" border="1">
          <tr>
            <td><img alt border="0" src="你的图片.jpg" width="199" height="150"></td>
          </tr>
        </table>
      </form>
    </div>
    </body>