如何实现左右拖动图片


<style>
 #img{position:absolute;height:200px;width:200px;left:200px;top:200px;}
</style>
 <BODY>
  <img src="" id="img">
  <script>
    var isDrag = false;
var startX;
img.onmousedown = function(){isDrag =true; startX=event.x;}
document.onmouseup = img.onmouseup = function(){isDrag =false;}
document.onmousemove =img.onmousemove =function(){
if(isDrag){
if(event.x > startX && img.offsetLeft>500) return;
if(event.x < startX && img.offsetLeft<100) return; img.style.left = img.offsetLeft + (event.x-startX);
startX = event.x;
}
}
  </script>
 </BODY>一个简单点的 左右范围100-500

解决方案 »

  1.   

    一样的 多存个y坐标<style>
     #img{position:absolute;height:200px;width:200px;left:200px;top:200px;}
    </style>
     <BODY>
      <img src="" id="img">
      <script>
        var isDrag = false;
    var start = [];
    img.onmousedown = function(){isDrag =true; start=[event.x,event.y];}
    document.onmouseup = img.onmouseup = function(){isDrag =false;}
    document.onmousemove =img.onmousemove =function(){
    if(isDrag){
    if(event.x > start[0] && img.offsetLeft>500) return;
    if(event.x < start[0] && img.offsetLeft<100) return; img.style.left = img.offsetLeft + (event.x-start[0]);
    img.style.top = img.offsetTop + (event.y-start[1]);
    start=[event.x,event.y];
    }
    }
      </script>
     </BODY>
      

  2.   

    http://shundebk.cn/temp/12.htm参考
      

  3.   

    加个鼠标点击<style>
     #img{position:absolute;height:200px;width:200px;left:200px;top:200px;}
    </style>
     <BODY>
      <img src="" id="img">
      <script>
        var isDrag = false;
        var startX;
        img.onmousedown = function(){isDrag =true; startX=event.x;}
        document.onmouseup = img.onmouseup = function(){isDrag =false;}
        document.onmousemove =img.onmousemove =function(){
            if(isDrag){
                if(event.x > startX && img.offsetLeft>500) return;
                if(event.x < startX && img.offsetLeft<100) return;            img.style.left = img.offsetLeft + (event.x-startX);
                startX = event.x;
            }
        } document.onclick=function(){
    if(event.srcElement == img) return;
    if(event.x < 100){
    img.style.left = 100;
    }else if(event.x > 500){
    img.style.left = 500;
    }else{
    img.style.left = event.x;
    }

    }
      </script>
     </BODY>
      

  4.   

    lz可以设置一个外部div做边界
    另一个div（如参考的）放里面设置好位置并设置好左右移动的范围
    偶就不做了