transform: scale(0.8,0.8) 缩放后，怎么计算拖动的鼠标值？

<!doctype html><html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<meta charset="utf-8" />
    <style type="text/css">
    body,html{ height:100%; }
        *{margin: 0;padding: 0;}
        .wrap{ width: 500px;height:100%; position: relative;margin: 0 auto;background: blue;transform: scale(0.8,0.8);}
        .box{ position: absolute;top:0;left:0; background: red;width: 200px;height: 200px; }
    </style>
</head>
<body>        <div class="wrap">
            <div class="box"></div>
        </div> <script type="text/javascript">
        var element = $(".box") , e = $(".wrap");
        var startX = 0, startY = 0, posY = 0, posX = 0;
e.on("mousedown", function (event) {
            startX = event.clientX  - e.offset().left;
            startY = event.clientY - element.offset().top;
            element.css({
                left : startX 
            })
            console.log(startX)           // console.log(event.clientX-(e.offset().left+100))        });
        $(document).on("mousemove", function (event) {
         if (startX || startY) {         }        });
        $(document).on("mouseup", function () {
            //startX = 0;
            //startY = 0;
        }); </script></body>
</html>
正常应该是鼠标光标点到哪里 红色的left值应该就是光标的坐标才对。。但是现在我设置了transform: scale(0.8,0.8);  红色的位置就不对了。。

解决方案 »

  1.   

    startX = (event.clientX  - e.offset().left)/0.8;
    即可
      

  2.   

                e.on("mousedown", function(event) {
                    startX = event.clientX  - e.offset().left;
                    startY = event.clientY - e.offset().top;
                    element.css({
                        left : startX/ 0.8,
                        top: startY/0.8
                    });
                    console.log(startX,startY);
                  //    console.log(event.clientX-(e.offset().left+100))            });
    现在 你能够实现点击点 为box 的左上位置
      

  3.   

    实现 缩放情况下的 拖拽
    <!doctype html><html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
        <meta charset="utf-8" />
        <style type="text/css">
        body,html{ height:100%; }
            *{margin: 0;padding: 0;}
            .wrap{ width: 500px;height:100%; position: relative;margin: 0 auto;background: blue; transform: scale(0.2,0.2)}
            .box{ position: absolute;top:0;left:0; background: red;width: 200px;height: 200px; }
        </style>
    </head>
    <body>        <div class="wrap">
                <div class="box"></div>
            </div>    <script type="text/javascript">
                var element = $(".box") , e = $(".wrap");
                var startX = 0, startY = 0, posY = 0, posX = 0;
                e.on("mousedown", function(event) {
                    startX = event.clientX  - e.offset().left;
                    startY = event.clientY - e.offset().top;
                    element.css({
                        left : startX/ 0.8,
                        top: startY/0.8
                    });
                  document.onmousemove = function(event) {
                    startX = event.clientX  - e.offset().left;
                    startY = event.clientY - e.offset().top;
                    element.css({
                        left : startX/ 0.2,
                        top: startY/0.2
                    });
                  };
                  document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                  };
                });
        </script></body>
    </html>
      

  4.   

    <!doctype html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
        <meta charset="utf-8" />
        <style type="text/css">
        body,html{ height:100%; }
            *{margin: 0;padding: 0;}
            .wrap{ width: 500px;height:100%; position: relative;margin: 0 auto;background: blue; transform: scale(0.2,0.2); overflow: ss;}
            .box{ position: absolute;top:0;left:0; background: red;width: 200px;height: 200px; }
        </style>
    </head>
    <body>
        <div class="wrap">
          <div class="box"></div>
        </div>
        <script type="text/javascript">
          var element = $(".box") , e = $(".wrap");
          var startX = 0, startY = 0, posY = 0, posX = 0;
          e.on("mousedown", function(event) {
              startX = event.clientX  - e.offset().left;
              startY = event.clientY - e.offset().top;
              element.css({
                  left : startX/ 0.2,
                  top: startY/0.2
              });
            document.onmousemove = function(event) {
              startX = event.clientX  - e.offset().left;
              startY = event.clientY - e.offset().top;
              element.css({
                  left : startX/ 0.2,
                  top: startY/0.2
              });
            };
            document.onmouseup = function() {
              document.onmousemove = null;
              document.onmouseup = null;
            };
          });
        </script></body>
    </html>