图片拖动该怎么实现

[tomorrow93]

不是我是伸手党，这东西我弄了2天了还是没弄出来，网上也找不到合适的插件 只能来求助了。

我要的效果：左边图片是可以拖动

	
	<div class="left">
		<div class="img">
			<img src="images/img.jpg">
		</div>
	</div>

	
       .left
	{
		width: 530px;
		height: 340px;
		overflow: hidden;
	}

最大div用了溢出隐藏，图片不限制宽高，但是用户可以拖动图片（类似于百度地图吧）

这种方法该怎么做啊？或者给个插件的地址

[tomorrow93]

晕代码怎么成这样了 ，我重新编辑下： <div class="left"> <div class="img"> <img src="images/img.jpg"> </div> </div> ------ .left { width: 530px; height: 340px; overflow: hidden; }

[当作看不见]

cropper .js 去掉边框的显示就好了

[functionsub]

嗯。没什么难度。 首先加点样式：

.left{postiton:relative;} /*原来的样式你自己加上*/
.img{position:absolute;left:0;top:0;right:0;bottom:0;}
.img img{position:absolute;top:0;left:0;}

然后修改下html

<img src="images/img.jpg" draggable="false" id="img"/>

最后加上脚本：

    window.onload = function(){
        var draging = false, lastPoint;
        var body = document.body;
        var img = document.getElementById('img');
        img.onmousedown = function(e){
            e = e || window.event;
            var x = e.clientX;
            var y = e.clientY;
            if(!lastPoint){
                lastPoint = {};
            }
            lastPoint.x = x;
            lastPoint.y = y;
            draging = true;
            if(e.preventDefault){
                e.preventDefault();
            }else{
                return false;
            }
        }
        img.ondragstart = function(e){
            e = e || window.event;
            if(e.preventDefault){
                e.preventDefault();
            }else{
                return false;
            }
        }
        img.onmouseup = function(){
            draging = false;
            lastPoint = undefined;
        }
        if(document.addEventListener){
            body.addEventListener('mousemove',function(e){
                onMouseMove(e);
            },false);
            body.addEventListener('mouseup',onMouseUp,false);
        }else{
            body.attachEvent('onmousemove',function(){
                var event = window.event;
                onMouseMove(event);
            })
            body.attachEvent('onmouseup',onMouseUp);
        }
        
        function onMouseMove(e){
            if(!draging){
                return;
            }
            var img = document.getElementById('img');
            if(lastPoint){
                var x = e.clientX , y = e.clientY;
                var imgTop = parseFloat(img.style.top || '0');
                var imgLeft = parseFloat(img.style.left || '0');
                var changeX = x - lastPoint.x , changeY = y - lastPoint.y;
                img.style.top = imgTop + changeY + 'px';
                img.style.left = imgLeft + changeX + 'px';
                lastPoint.x = x, lastPoint.y = y;
            }
        }
        function onMouseUp(){
            draging = false;
            lastPoint = undefined;
        }
    }