高手请进，遇到棘手拖动问题！

我遇到了个难点:一个页面有很多图片，是用div控制的，现在我想在空白处点击鼠标并拖动，
              在这个拖动的过程中，这些图片沿着鼠标移动的位移移动，抬起鼠标，图片则固定在新的位置。
   
请问怎么来实现？高手提供个思路或者什么代码函数，小弟不胜感激！

解决方案 »

  1.   

    //借花献佛，//给某对象添加事件监听
    function addListener(element,e,fn){
    element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
    } 
    //删除某对象的事件监听
    function removeListener(element,e,fn){
    element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
    }var BindAsEventListener = function(object, fun) { 
    var args = Array.prototype.slice.call(arguments,2);
    return function(event) { 
    return fun.apply(object, [event || window.event].concat(args)); 
    } 
    }
    //绑定，将某对象绑定到特定的方法上。
    var Bind = function(object, fun,args) { 
    return function() { 
    return fun.apply(object,args||[]); 
    } 
    } 
    var Drag = { 
    init:function(o,oRoot){ 
    this.dragObj = o; 
    this.moveObj = oRoot || o;
    this._fM = BindAsEventListener(this, this.move); 
    this._fS = Bind(this, this.end); 
    this._fB = BindAsEventListener(this, this.start);
    this.x = 0; 
    this.y = 0; 
    addListener(this.dragObj,'mousedown',this._fB);
    },
    start:function(e){ 
    this.x = e.clientX - this.moveObj.offsetLeft||0; 
    this.y = e.clientY - this.moveObj.offsetTop ||0; 
    if(window.event){ 
    addListener(this.moveObj, "losecapture", this._fS); 
    this.moveObj.setCapture(); 
    }else{ 
     e.preventDefault(); 
     addListener(window, "blur", this._fS); 
    }
    addListener(document,'mousemove',this._fM) ;
    addListener(document,'mouseup',this._fS);
    },
    move : function(e){
    var i_x = e.clientX - this.x, i_y = e.clientY - this.y;
    this.moveObj.style["left"] = Math.max(i_x,0)+'px'; 
    this.moveObj.style["top"] = Math.max(i_y,0)+'px';
    },
    end : function(){
    removeListener(document,'mousemove',this._fM); 
    removeListener(document,'mouseup',this._fS); 
    if(window.event){ 
    removeListener(this.moveObj, "losecapture", this._fS); 
    this.moveObj.releaseCapture(); 
    }else { 
    removeListener(window, "blur", this._fS); 
    }
       }
    }
      

  2.   


    <html>  
    <head>  
    <meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">  
    <title> 新建网页 1 </title>  
    <script>  
    var x=0;  
    var y=0;
    var top;
    var left;  
    var flag = false;
    function mousedown(){
        x=event.x;  
        y=event.y;  
        flag = true;
    }
    function mouseup(){
        flag = false;
    }
    function mousemove(){
        if(!flag) return;
        top=document.all.div1.style.top;  
        left=document.all.div1.style.left;  
        document.all.div1.style.top=parseInt(top.substring(0,top.length-2))+(event.y-y);  
        document.all.div1.style.left=parseInt(left.substring(0,left.length-2))+(event.x-x);  
        y=event.y;  
        x=event.x;  
    }
    </script>  
    </head>  
    <body>  
    <div id=div1 style= "position:absolute;top:100px;left:100px;width:100px;height:100px;background-color:#cccccc;cursor:hand" onmousedown= "mousedown()" onmouseup="mouseup()" onmousemove= "mousemove() ">
    <img src="imgs.jpg">
    </div>  
    </body>  
    </html>
      

  3.   


    不是这么简单的，我的意思是说：1、需要实现 当前页面有很多小div，可以拖动的时候跟着动，松手就固定了
    2、需要实现 当前页面被拖走了，剩余了一部分空的地方，怎样补上另外的图片，还能继续被鼠标拖动！
      

  4.   


    不是这么简单的，我的意思是说：1、需要实现 当前页面有很多小div，可以拖动的时候跟着动，松手就固定了
    2、需要实现 当前页面被拖走了，剩余了一部分空的地方，怎样补上另外的图片，还能继续被鼠标拖动！