JS使用CSS3实现拖拽，拖拽过程中元素坐标问题

本帖最后由 cy0703 于 2010-12-22 21:24:16 编辑

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>SafariDragUseCSS3</title>
    <style type="text/css">
    HTML, BODY{
    width:100%;
    height:100%;
    }
    </style>
    <script type="text/javascript">
    function init() {
    var d = document.getElementById("d");
    var offsetX, offsetY, newleft, newtop;
    function mousedown(e) {
    offsetX = e.clientX - parseInt(d.style.left);
    offsetY = e.clientY - parseInt(d.style.top);
    document.addEventListener("mousemove", mousemove, false);
    document.addEventListener("mouseup", mouseup, false);

    document.body.style.cursor = "move";
    }
    function mousemove(e) {
    newleft = e.clientX - offsetX;
    newtop = e.clientY - offsetY;
    var scopeX = newleft - parseInt(d.style.left);
    var scopeY = newtop - parseInt(d.style.top);
    if (d.style.MozTransform != "undefined") {
    d.style.MozTransform = "translate(" + scopeX + "px," + scopeY + "px)";
    }
    if (d.style.webkitTransform != "undefined") {
    d.style.webkitTransform = "translate(" + scopeX + "px," + scopeY + "px)";
    }
    showXY(parseInt(d.style.left), parseInt(d.style.top));
    }
    function mouseup(e) {
    if (d.style.MozTransform != "undefined") {
    d.style.MozTransform = "";
    }
    if (d.style.webkitTransform != "undefined") {
    d.style.webkitTransform = "";
    } d.style.left = newleft + "px";
    d.style.top = newtop + "px";
    document.removeEventListener("mousemove", mousemove, false);
    document.removeEventListener("mouseup", mouseup, false);

    document.body.style.cursor = "";
    } d.addEventListener("mousedown", mousedown, false);
    }
    function showXY(x, y) {
    document.getElementById("info").innerHTML = x + " | " + y;
    }
    </script></head>
    <body style="margin: 0; padding: 0" onload="init()">
    <div id="info">
    </div>
    <div id="d" style="cursor:move;background: #c0c0ff; border: 1px solid black; width: 200px;
    height: 200px; position: absolute; left: 30px; top: 30px;">
    </div>
    </body>
    </html>
      

  2.   

    jquery 有个drag的插件，楼主可以自己看看。