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); 红色的位置就不对了。。