我正在 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");
}
最佳答案
固定位置与窗口位置有关,如果你需要保持相同的位置,你必须计算窗口的宽度和高度,并根据你的值增加或减少它们。
关于CSS:如何更改position:relative于固定值并保留 "left"和 "top"值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36178359/