CSS：如何更改的位置是：相对于固定和preserve＆QUOT;左＆QUOT;和＆QUOT;顶＆QUOT;值 [英] CSS: How to change position : relative to fixed and preserve "left" and "top" values

问题描述

我写在Angular2一个dragDirective。元素使用NG-并默认安排的位置是：相对的。移动元素，我需要改变位置属性为固定。这会导致在元件位置骤升。

我该如何解决这个问题。

模板 -

 ＆LT;李* ngFor =dragZoneElems的#el; #idx =指数＆GT;
  ＆LT; H1 [dragResponder] =真＆GT; {{el.first}} {{el.last}}＆LT; / H1＆GT;
＆LT; /李＆GT;
 

Directive-

  this._mousedown.switchMap（（mdwnEvn，I）=＆GT; {
        this.DisableSelection（）;
        mdwnEvn preventDefault（）。
        this._messageBus.dispatch（的dragstart，this._elem）;
        返回Rx.Observable.create（（观察员）=＆GT; {
            observer._next（{
                preVX：mdwnEvn.x  -  this._elemBounds.left  -  window.pageXOffset，
                preVY：mdwnEvn.y  -  this._elemBounds.top  -  window.pageYOffset
            }）;
        }）;
    }）switchMap（（偏移，I）=＆GT; {
        返回this._mousemove.flatMap（（mmoveEvn，I）=＆GT; {
            mmoveEvn preventDefault（）。
            this.DisableSelection（）;
            返回Rx.Observable.create（观察员= GT; {
                observer._next（{
                    左：mmoveEvn.x  - 偏移preVX]，
                    顶部：mmoveEvn.y  - 偏移preVY]
                }）;
            }）;
        }）takeUntil（this._mouseout）.takeUntil（this._mouseup）。
    }）。订阅（{
        下一篇：POS =＆GT; {
            this.SetPosition（POS）
        }
    }）;
}
 

SETPOSITION功能 -

  SETPOSITION（POS：对象）{
    this._renderer.setElementStyle（this._elem.nativeElement，位置，固定）;
    this._renderer.setElementStyle（this._elem.nativeElement，左，（位置[左]  -  this._margin [1]）的toString（）+像素）;
    this._renderer.setElementStyle（this._elem.nativeElement，顶，（位置[顶]  -  this._margin [0]）的toString（）+像素）;
}
 

解决方案

这个问题最后被无关紧要。跳是怎么回事，因为我没有重新初始化上点击的边界。

I am writing a dragDirective in Angular2. Elements are arranged using ng-for and default to position:relative. To move the element I need to change the position attribute to fixed. This causes a sudden jump in the element position.

How do I resolve this.

Template-

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

Directive-

    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 Function-

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

解决方案

The Question ended up being irrelevant. The jump was happening because I was not reinitializing the bounds on click.

这篇关于CSS：如何更改的位置是：相对于固定和preserve＆QUOT;左＆QUOT;和＆QUOT;顶＆QUOT;值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！