Question

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

我该如何解决这个问题。

模板 -

<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

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

Answer 2

该问题最终无关紧要。跳跃正在发生，因为我没有重新初始化点击界限。

CSS：如何更改位置：相对于固定并保留“左”和“顶”值

2 个答案: