网站上鼠标点击可以拖拽的效果

看到某些大站例如：soso 、 51job个人后台，都有鼠标变成手型，可以拖拽的效果，请问这是如何实现的，最好有例子做下示范~

解决方案 »

  1.   

    用jquery很容易实现，网上搜一下jquery，drag-drop
      

  2.   

    jQurey 里的 draggable droppable
      

  3.   

    http://www.linala.com/TtnWidget/test.php
    完善中
      

  4.   

    有使用js框架，就用框架方法，省事且功能强。
    基本原理是，将div设置为浮动框(position:absolute)，然后鼠标onmousemove事件，读取当前拖动的div对象(event.srcElement || event.target),使得拖动对象的根据div的宽高，原来的位置(left,top)，和当前的鼠标位置,以及scoll的位置，计算新的left ,top，赋予div.以前有写过个简单的。
    <html>
    <title>My drag test</title>
    <head>
    <script>
    (function(){
    var dragObj = null;
    var lastX,lastY;
    var drag = function(obj)
    {
    var eo = window.event || arguments.callee.caller.arguments[0];
    if(isNaN(parseInt(obj.style.top))) obj.style.top = obj.offsetTop;
    if(isNaN(parseInt(obj.style.left))) obj.style.left = obj.offsetLeft;
    dragStart(obj,eo);
    return false;
    }
    var dragStart = function(o,eo)
    {
    dragObj = o;
    if(o.setCapture) o.setCapture();
       else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    lastX = eo.clientX + document.body.scrollLeft - document.body.clientLeft;
    lastY = eo.clientY + document.body.scrollTop - document.body.clientTop;
    document.onmouseup = dragEnd;
    document.onmousemove = dragMe;

    return false;
    }

    function dragMe(e)
    {
    var eo = window.event || e;
    //清除选择
    window.getSelection && window.getSelection().removeAllRanges();
    var lastLeft = parseInt(dragObj.style.left);
    var lastTop = parseInt(dragObj.style.top);

    var cmx = eo.clientX + document.body.scrollLeft - document.body.clientLeft;
    var cmy = eo.clientY + document.body.scrollTop - document.body.clientTop; var cl = lastLeft + (cmx-lastX)
    var ct = lastTop + (cmy-lastY);
    dragObj.style.left = cl+'px';
    dragObj.style.top = ct+'px';

    lastX = cmx;
    lastY = cmy;
    return false;
    }

    function dragEnd(e)
    {
    document.onmousemove = null;
    document.onmouseup = null;
    if(dragObj.releaseCapture) dragObj.releaseCapture();
       else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    dragObj = null;
    return false;
    }
    window['drag'] = drag;
    })()
    </script>
    </head>
    <body>
    <div id='ab' style="position:absolute;width:200;height:200;background:red;" onmousedown="drag(this)"></div>
    <div id='ev' style="position:absolute;width:200;height:200;background:green" onmousedown="drag(this)"></div>
    <div id='ex' style="position:absolute;width:200;height:200;background:yellow" onmousedown="drag(this)"></div>
    </body>
    </html>