谁有关于图层拖动的代码啊?
现在我要实现一个图层的拖动功能,
不知道该怎么实现。
求一段图层拖动的代码,
或者给个思路也行啊!!!
谢谢了!!!

解决方案 »

  1.   

    jquery + jqDnR
    http://dev.iceburg.net/jquery/jqDnR/
      

  2.   

    http://www.cnblogs.com/osccur123/articles/1190943.html
      

  3.   

    http://topic.csdn.net/u/20090422/16/2a75c450-0fbf-4ab5-95e0-eeb94fb25ad9.html
    2楼
      

  4.   

    基本每个对象都可以拖动,
    这里有一个例子:
    http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx,
    而且代码封装的很好,
    只要传递一个元素的id给function就可以。
      

  5.   


    <html>  
        <head>  
        <title>Drag</title>  
        <style type="text/css">  
        </style>  
        <script type="text/javascript"> 
        var t=10; 
        function change(){
            t++;
            window.status=t;
        }
            var Drag = {   
                    //当前被drag的对象   
                obj: null,   
                //初始化    
                init: function(id){   
                    var o = document.getElementById(id);   
                    //当onmousedown开始拖拽   
                    o.onmousedown = Drag.start;   
                },   
                start: function(e){   
                    var o = Drag.obj = this;   
                    //lastMouseX,lastMouseY记录上次鼠标的位置   
                    o.lastMouseX = Drag.getEvent(e).x;   
                    o.lastMouseY = Drag.getEvent(e).y;   
                    //当onmousemove开始移动   
                    document.onmousemove = Drag.move;   
                    //当onmouseup终止拖拽   
                    document.onmouseup = Drag.end;   
                },   
                move: function(e){   
                    var o = Drag.obj;   
                    //dx, dy表示鼠标移动的距离   
                    var dx = Drag.getEvent(e).x - o.lastMouseX;   
                    var dy = Drag.getEvent(e).y - o.lastMouseY;   
                    //因为element.style.left通常返回的结果是'200px'的形式,所以要用parseInt转化   
                    var left = parseInt(o.style.left) + dx ;   
                    var top = parseInt(o.style.top) + dy;   
                    o.style.left = left;   
                   o.style.top = top;                   o.lastMouseX = Drag.getEvent(e).x;   
                    o.lastMouseY = Drag.getEvent(e).y;   
                },      
                end: function(e){   
                    document.onmousemove = null;   
                    document.onMouseup = null;   
                    Drag.obj = null;   
                },   
                //辅助函数,处理IE和FF不同的event模型   
                getEvent: function(e){   
                                    if (typeof e == 'undefined'){   
                                        e = window.event;   
                                    }   
                                    //alert(e.x?e.x : e.layerX);   
                                    if(typeof e.x == 'undefined'){   
                                        e.x = e.pageX;//复制了n遍,到了csdn就变成ee.x了   
                                    }   
                                    if(typeof e.y == 'undefined'){   
                                        e.y = e.pageY;//复制了n遍,到了csdn就变成ee.x了   
                                    }   
                                    return e;   
                            }   
            };   
              
            </script>  
        </head>  
        <body> 
    <div id="div1" style="position:absolute; left:30px; top:30px;width:200px; height:200px; background-color:#666666;" onmousemove="change();"></div> 
            <div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div>  
            <div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div>  
            <div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:80px; width:80px;"></div>  
                </body>  
        <script type="text/javascript">  
            //测试代码开始,使三个div具有drag and drop的能力。   
            Drag.init('r');   
            Drag.init('g');   
            Drag.init('b');  
            </script>  
    </html> 上面的代码在小的DIV在大的DIV上面移动时不能触发大的DIV的onmousemove事件,貌似也不能触发大的DIV的其它事件。
    怎样才能触发大的DIV的事件呢。前提是不能使用大的DIV去包含小的DIV。
    谁知道啊?
      

  6.   

    我这里有个用鼠标拖动层的方法  你看要不要 <script language="javascript" type="text/javascript">
    function startMove(objDiv)
    {
     document.attachEvent("onmousemove",moveDiv);
     document.attachEvent("onmouseup",endMove);
     document.attachEvent("onselectstart",selectNo);
     document["moveDiv"] = objDiv;
     document["startX"] = event.x;
     document["startY"] = event.y;
     document["oldX"] = objDiv.getBoundingClientRect().left;
     document["oldY"] = objDiv.getBoundingClientRect().top;
    }
    function moveDiv()
    {
     var obj = document["moveDiv"];
     if(obj)
     {
      var l = document["oldX"];
      var t = document["oldY"];
      obj.style.position = "absolute";
      obj.style.left = l + (event.x-document["startX"]);
      obj.style.top = t + (event.y-document["startY"]);
     }
    }
    function endMove()
    {
     document.detachEvent("onmousemove",moveDiv);
     document.detachEvent("onmouseup",endMove);
     document.detachEvent("onselectstart",selectNo);
     document["moveDiv"] = null;
     document["startX"] = null;
     document["startY"] = null;
    }
    function selectNo()

        return false;
     }
    </script>
      

  7.   

     我测试了你的code,外面的div可以响应onmousemove. 不知道你的为什么不可以,你用什么浏览器?
      

  8.   

    外面的div可以响应onmousemove?
    我的意思是最大的那一个灰色背景的div。外面的div是哪一个啊?
      

  9.   

    使用mootools框架new Drag.Move($('需要拖动的那个玩意的id'),{handle:$('拖动的把手的id,比如标题栏啦之类的,可不要')});拖动有时候就是这么简单