Question

我写了一个用于拖动元素的angularJS指令，因此我有一个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;
        }

我不想将元素从窗口中删除。因此我想使用变量maxX和maxY。但是我能做什么，如果元素是这样的css翻译：

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

Answer 1

应用：

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

现在您可以获得元素和所有其他属性的实际位置。

喜欢：

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

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

马丁编辑：谢谢，现在它有效：

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;
        }

如何在css-translation之后获取元素位置

1 个答案: