这个功能怎么实现请各位高手帮忙

功能需求是这样的：
有个矩形框（div）里面有个图片（地图图片img）拖拽IMG移动  不出这个矩形框DIV 
就像web地图那样

解决方案 »

  1.   


    <html>
    <head>
    <style type="text/css">
    #box
    {
    position:absolute;
    top:100px;
    left:100px;
    width:400px;
    height:400px;
    border-style:solid;
    border-width:2px;
    border-color:red;
    }

    #box div
    {
    position:absolute;
    background-color:#a8b8c8;
    }
    </style> <script type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    } function initialize()
    {
    $("e1").style.left="0";
    $("e1").style.top="0";
    $("e1").style.width="50px";
    $("e1").style.height="50px";
    } function areaDrag(box,element)
    { document.onmousemove=startDrag;
    document.onmouseup=stopDrag;
    var deltaX=event.clientX-(parseInt(box.currentStyle.left)+parseInt(box.currentStyle.borderWidth)+parseInt(element.style.left));
    var deltaY=event.clientY-(parseInt(box.currentStyle.top)+parseInt(box.currentStyle.borderWidth)+parseInt(element.style.top));
    function startDrag()
    {
    if(event.clientX-deltaX>=parseInt(box.currentStyle.left) && event.clientX-deltaX<=parseInt(box.currentStyle.width)-parseInt(box.currentStyle.borderWidth)*2+parseInt(element.style.width))
    {
    element.style.left=event.clientX-parseInt(box.currentStyle.left)-deltaX;
    }
    else
    {
    if(event.clientX-deltaX<parseInt(box.currentStyle.left))
    {
    element.style.left="0";
    }
    else
    {
    element.style.left=parseInt(box.currentStyle.width)-parseInt(box.currentStyle.borderWidth)*2-parseInt(element.style.width);
    }
    }

    if(event.clientY-deltaY>=parseInt(box.currentStyle.top) && event.clientY-deltaY<=parseInt(box.currentStyle.height)-parseInt(box.currentStyle.borderWidth)*2+parseInt(element.style.height))
    {
    element.style.top=event.clientY-parseInt(box.currentStyle.top)-deltaY;
    }
    else
    {
    if(event.clientY-deltaY<parseInt(box.currentStyle.top))
    {
    element.style.top="0";
    }
    else
    {
    element.style.top=parseInt(box.currentStyle.height)-parseInt(box.currentStyle.borderWidth)*2-parseInt(element.style.height);
    }
    }
    } function stopDrag()
    {
    document.onmousemove="";
    }
    }
    </script>
    </head>

    <body onload="initialize()">
    <div id="box">
    <div onmousedown="areaDrag($('box'),this)" id="e1"></div>
    </div>
    </body>
    </html>
      

  2.   

    这位大哥 现谢谢你了！！
    不过这个不是我想要的 你实现了 拖拽 不出 div 
    我的是 里面是个全图片 但是 div中显示的是这个大图片的局部 
    然后 拖拽移动来看其它部分
      

  3.   


    <html>
    <head>
    <style type="text/css">
    #box
    {
    filter:progid:DXImageTransform.Microsoft.BasicImage(Mask=1,MaskColor=0x00A8B8C8);
    position:absolute;
    top:100px;
    left:100px;
    width:550px;
    height:380px;
    z-index:100;
    border-style:solid;
    border-width:0;
    border-color:#244915;
    }

    #box div
    {
    position:absolute;
    background-color:#a8b8c8;
    border-style:solid;
    border-width:1px;
    z-index:101;

    }

    img
    {
    position:absolute;
    top:100px;
    left:100px;
    width:550px;
    height:380px;
    z-index:10;
    }
    </style> <script type="text/javascript">
    function $(id)
    {
    return document.getElementById(id);
    } function initialize()
    {
    $("e1").style.left="0";
    $("e1").style.top="0";
    $("e1").style.width="100px";
    $("e1").style.height="100px";
    $("e1").onselectstart=function(){return false;};
    } function areaDrag(box,element)
    { document.onmousemove=startDrag;
    document.onmouseup=stopDrag;
    var deltaX=event.clientX-(parseInt(box.currentStyle.left)+parseInt(box.currentStyle.borderWidth)+parseInt(element.style.left));
    var deltaY=event.clientY-(parseInt(box.currentStyle.top)+parseInt(box.currentStyle.borderWidth)+parseInt(element.style.top));
    function startDrag()
    {
    if(event.clientX-deltaX>=parseInt(box.currentStyle.left) && event.clientX-deltaX<=parseInt(box.currentStyle.width)-parseInt(box.currentStyle.borderWidth)*2)
    {
    element.style.left=event.clientX-parseInt(box.currentStyle.left)-deltaX;
    }
    else
    {
    if(event.clientX-deltaX<parseInt(box.currentStyle.left))
    {
    element.style.left="0";
    }
    else
    {
    element.style.left=parseInt(box.currentStyle.width)-parseInt(box.currentStyle.borderWidth)*2-parseInt(element.style.width);
    }
    }

    if(event.clientY-deltaY>=parseInt(box.currentStyle.top) && event.clientY-deltaY<=parseInt(box.currentStyle.height)-parseInt(box.currentStyle.borderWidth)*2)
    {
    element.style.top=event.clientY-parseInt(box.currentStyle.top)-deltaY;
    }
    else
    {
    if(event.clientY-deltaY<parseInt(box.currentStyle.top))
    {
    element.style.top="0";
    }
    else
    {
    element.style.top=parseInt(box.currentStyle.height)-parseInt(box.currentStyle.borderWidth)*2-parseInt(element.style.height);
    }
    }
    } function stopDrag()
    {
    document.onmousemove="";
    }
    }
    </script>
    </head>

    <body onload="initialize()">
    <div id="box">
    <div onmousedown="areaDrag($('box'),this)" id="e1"></div>
    </div>
    <img src="http://www.cnblogs.com/images/cnblogs_com/random/world.jpg" />
    </body>
    </html>