CSS:如何更改position:relative于固定值并保留 "left"和 "top"值

Question

我正在 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 函数-

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

Answer 1

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