CSS：如何更改位置：相对于固定并保留“left”和“top”值答案

【问题标题】：CSS: How to change position : relative to fixed and preserve "left" and "top" valuesCSS：如何更改位置：相对于固定并保留“left”和“top”值
【发布时间】：2016-07-10 18:07:19
【问题描述】：

我正在Angular2 中编写一个dragDirective。元素使用 ng-for 排列，默认为 position:relative。要移动元素，我需要将位置属性更改为固定。这会导致元素位置突然跳跃。

我该如何解决这个问题。

模板-

<li *ngFor = "#el of dragZoneElems; #idx = index">
  <h1 [dragResponder] = "true">{{el.first}} {{el.last}}</h1>
</li>

指令-

    this._mousedown.switchMap((mdwnEvn, i) => {
        this.DisableSelection();
        mdwnEvn.preventDefault();
        this._messageBus.dispatch("dragStart", this._elem);
        return Rx.Observable.create((observer) => {
            observer._next({
                prevx: mdwnEvn.x - this._elemBounds.left - window.pageXOffset,
                prevy: mdwnEvn.y - this._elemBounds.top - window.pageYOffset
            });
        });
    }).switchMap((offSet, i) => {
        return this._mousemove.flatMap((mmoveEvn, i) => {
            mmoveEvn.preventDefault();
            this.DisableSelection();
            return Rx.Observable.create(observer => {
                observer._next({
                    left: mmoveEvn.x - offSet["prevx"],
                    top: mmoveEvn.y - offSet["prevy"]
                });
            });
        }).takeUntil(this._mouseout).takeUntil(this._mouseup);
    }).subscribe({
        next: pos => {
            this.SetPosition(pos);
        }
    });
}

设置位置函数-

SetPosition(pos : Object){
    this._renderer.setElementStyle(this._elem.nativeElement, "position", "fixed");
    this._renderer.setElementStyle(this._elem.nativeElement, "left", (pos["left"] - this._margin[1]).toString() + "px");
    this._renderer.setElementStyle(this._elem.nativeElement, "top" ,  (pos["top"] - this._margin[0]).toString() + "px");
}

【问题讨论】：

标签： css angular

【解决方案1】：

固定位置与窗口位置有关，如果您需要保持相同的位置，您必须计算窗口的宽度和高度，并根据您的值添加或减少它们。

【讨论】：

如何获得相对于窗口的原始位置（由 ng-for 设置）？
是的，windows、document和page有很多属性，看看w3schools.com/jsref/prop_win_pagexoffset.asp
嗨，我似乎找不到一个在将位置从相对位置更改为固定位置时会发生变化的属性。然而，元素仍然移动位置。我需要知道哪个属性值发生了变化，以便我可以相应地偏移当前位置。

【解决方案2】：

这个问题最终变得无关紧要。发生跳跃是因为我没有在点击时重新初始化边界。

【讨论】：