CSS转换后如何获取元素位置

Question

I wrote an angularJS directive for dragging elements, therefore I have a mousemove-handler:

function mousemove($event) {
            var x = startX + $event.clientX - initialMouseX;
            var y = startY + $event.clientY - initialMouseY;
            var maxX = window.innerWidth - elm.prop('offsetWidth');
            var maxY = window.innerHeight - elm.prop('offsetHeight');
            x = (x < maxX) ? x : maxX;
            y = (y < maxY) ? y : maxY;
            elm.css({
                top: y + 'px',
                left: x + 'px'
            });
            return false;
        }

I don´t want to drop the element out of the window. Therefore I want to use the variables maxX and maxY. But what can I do, if the element is css-translated like this:

.my-element {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
}

Answer 1

Apply :

var elmprop = getComputedStyle('idofelm', null);

Now you are able to get actual position of element and all other properties .

Like :

elmprop.backgroundColor,
elmprop.top,
elmprop.left,

=================================

Edit by Martin: Thank you, now it works:

function getMaxPos() {
            var computetStyle = getComputedStyle(elm[0], null);
            var tx, ty;
            var transformOrigin =
                computetStyle.transformOrigin ||
                computetStyle.webkitTransformOrigin ||
                computetStyle.MozTransformOrigin ||
                computetStyle.msTransformOrigin ||
                computetStyle.OTransformOrigin;
            tx = Math.ceil(parseFloat(transformOrigin));
            ty = Math.ceil(parseFloat(transformOrigin.split(" ")[1]));
            return {
                max: {
                    x: tx + window.innerWidth - elm.prop('offsetWidth'),
                    y: ty + window.innerHeight - elm.prop('offsetHeight')
                },
                min: {
                    x: tx,
                    y: ty
                }
            };
        }

        function mousemove($event) {
            var x = startX + $event.clientX - initialMouseX;
            var y = startY + $event.clientY - initialMouseY;
            var limit = getMaxPos();
            x = (x < limit.max.x) ? ((x > limit.min.x) ? x : limit.min.x) : limit.max.x;
            y = (y < limit.max.y) ? ((y > limit.min.y) ? y : limit.min.y) : limit.max.y;
            elm.css({
                top: y + 'px',
                left: x + 'px'
            });
            getMaxPos();
            return false;
        }