0
私は、dragDirectiveをAngular2で書いています。要素はng-forを使用して配置され、デフォルトはposition：relativeになります。要素を移動するには、position属性をfixedに変更する必要があります。これにより、要素の位置が突然ジャンプします。CSS：位置を変更する方法：固定して相対的な "左"と "上"の値を保持する
どうすれば解決できますか？
テンプレート -
<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");
}
ウィンドウに対して相対位置（ng-forによって設定）を取得するにはどうすればよいですか？ – shiv
はいウィンドウ、ドキュメント、およびページには多くのプロパティがあります http://www.w3schools.com/jsref/prop_win_pagexoffset.asp –
こんにちは、私は変更する単一のプロパティを見つけることができないようです相対位置から固定位置への変更時。しかし、要素はまだ位置を移動します。私はそれに応じて現在の位置を相殺できるように、どのプロパティ値が変化するかを知る必要があります。 – shiv