javascript - 关于trasform后的坐标计算的问题

问题描述

我在做了一个图片在父容器内拖动的功能后，将父容器用transform变化了一下，旋转啊拉伸啊什么的，之后坐标的计算就开始紊乱了，我想问一下如果想让他正常工作的话应该怎么做？拖动的代码如下：$(function(){

var dragging = false;var iX, iY;var qX, qY;var tempid; $('.dragcontain').mousedown(function(e) { dragging = true; iX = accSub(e.clientX,this.offsetLeft); iY = accSub(e.clientY,this.offsetTop); qX = $(e.target).children().position().left; qY = $(e.target).children().position().top; console.log(qX,qY); console.log(iX,iY); this.setCapture && this.setCapture(); return false;});document.onmousemove = function(e) { if (dragging) { var e = e || window.event; console.log('sX:',e.clientX,'sY:',e.clientY); var nX = accSub(e.clientX,e.target.offsetLeft); var nY = accSub(e.clientY,e.target.offsetTop); console.log(e.clientX,e.target.offsetLeft) var mX = accSub(nX,iX); var mY = accSub(nY,iY); var oX = accAdd(qX,mX); var oY = accAdd(qY,mY); $(e.target).children().css({'left':oX + 'px', 'top':oY + 'px'}); console.log('iX:',iX,'iY:',iY); console.log('oX:',oX,'oY:',oY); console.log('nX:',nX,'nY:',nY); console.log('mX:',mX,'mY:',mY); console.log('qX:',qX,'qY:',qY); console.log(''); return false; }};$(document).mouseup(function(e) { dragging = false; e.cancelBubble = true; iX=0; iY=0;})

})

光光是将dragcontain给rotate（45deg）旋转后就开始乱了，坐标直接到-1000多去了

问题解答

transform旋转缩放都是有基点的，transform-origin