如何使用NG2-Dragula和Angular Element Resizer

Question

我正在使用dragula在桌子上拖放。另外，我正在使用插件Angular Resizier元素来调整表列的大小。我一直在Angular2工作。

所以我想要的是。我目前的情况就像图像上的这个灰色列。整列宽度是可拖动的，这使我在调整列时有问题。因此，当我试图调整列大小时，它的作用就像拖放。我希望我的柱面就像这个黄色。有一些调整大小的空间。

和我的html代码的Si部分：

<div class="row" [dragula]='"one-bag"' [dragulaModel]='names'>
    <div class="col" *ngFor="let name of names"
         mwlResizable
         [validateResize]="validate"
         [resizeEdges]="{right: true}"
         [enableGhostResize]="false">
         <label>{{name}}</label>
    </div>  
</div>

这是我一直在使用的Resizer。https://github.com/mattlewis92/angular-resizable-lement

问题：如何在同一表列上使用NG2-Dragula和Resizer？

Answer 1

我本人遇到了同样的问题，但是使用ngdraggable而不是dragula ...

我想到的唯一解决方案是为两者设置处理程序，例如MWLResizableHandler htmlemlement for Resizeable Module，而另一个用于NGDRAGGABABLE模块，请停止对两者的单击事件的传播，并迫使它们在组件中更新相同的样式对象，然后将ngstyle传递到元素上以确定其在浏览器上的位置。

我认为问题的来源是ngdragable实现a 转换：转换(x，y(虽然可重新算置是指样式对象，这意味着顶/左定位。

我尚未实现该解决方案，但是一旦我在代码中进行配置后，我将发布一个更新。

编辑/更新：

好吧，我所做的是实现自己的可拖动功能，从长远来看，这很容易。这是我的重大内容：

<div @fade id="{{index}}" class="box" [ngStyle]="style"
    mwlResizable 
    [validateResize]="validate"
    [resizeCursorPrecision]="resizeCursor"
    [enableGhostResize]="true"
    [ghostElementPositioning]="style.position"
    (resizeEnd)="onResizeEnd($event)"
    (click)="setSelected($event)"
    [ngClass]="{selected : selected}">
    <div 
    style="cursor: move; height: 50px; width: 50px; border: 2px solid black; background-color: green;"
    (mousedown)="onMouseDown($event)" 
    (mousemove)="onMove($event)"
    (mouseup)="finalPosition($event)"
    (mouseleave)="finalPosition($event)">
    </div>
    <img class="resize-handle-top-left" 
    mwlResizeHandle  
    [resizeEdges]="{top: true, left: true}"
    src="http://i.imgur.com/eqzz2dl.gif">
    <img class="resize-handle-top-right" 
    mwlResizeHandle  
    [resizeEdges]="{top: true, right: true}"
    src="http://i.imgur.com/eqzz2dl.gif">
    <img class="resize-handle-bottom-left" 
    mwlResizeHandle  
    [resizeEdges]="{bottom: true, left: true}"
    src="http://i.imgur.com/eqzz2dl.gif">
    <img class="resize-handle-bottom-right" 
    mwlResizeHandle  
    [resizeEdges]="{bottom: true, right: true}"
    src="http://i.imgur.com/eqzz2dl.gif">
  </div>
</div>

实现调整大小的代码：

public onResizeEnd(event: ResizeEvent): void {
      this.style = {
      position: 'absolute',
      left: `${event.rectangle.left}px`,
      right: `${event.rectangle.right}px`,
      top: `${event.rectangle.top}px`,
      bottom: `${event.rectangle.bottom}px`,
      width: `${event.rectangle.width}px`,
      height: `${event.rectangle.height}px`
    };

所以我所做的只是Div中间的一个临时盒子，并在其中设置了一些活动的侦听器，Mousedown，Mousemove，MouseUp。登记室功能只是在那里检查阻力是否不超过父母的划分限制：

checkBoundariesLeft(styleAttr: number, tempMove: number): number {
    if ((styleAttr + tempMove) > 0 && (styleAttr + tempMove) < (this.api.imageW - Number.parseInt(this.style.width))) {
      this.previousLeft = (styleAttr + tempMove);
      return this.previousLeft;
    }
    return this.previousLeft;
  }
  checkBoundariesRight(styleAttr: number, tempMove: number): number {
    if ((styleAttr + tempMove) > Number.parseInt(this.style.width) && (styleAttr + tempMove) < this.api.imageW) {
      this.previousRight = (styleAttr + tempMove);
      return this.previousRight;
    }
    return this.previousRight;
  }
  checkBoundariesTop(styleAttr: number, tempMove: number): number {
    if ((styleAttr + tempMove) > 0 && (styleAttr + tempMove) < (this.api.imageH - Number.parseInt(this.style.height))) {
      this.previousTop = (styleAttr + tempMove);
      return this.previousTop;
    }
    return this.previousTop;
  }
  checkBoundariesBottom(styleAttr: number, tempMove: number): number {
    if ((styleAttr + tempMove) > Number.parseInt(this.style.height) && (styleAttr + tempMove) < this.api.imageH) {
      this.previousBottom = (styleAttr + tempMove);
      return this.previousBottom;
    }
    return this.previousBottom;
  }
  public onMouseDown(event: MouseEvent): void {
    event.stopPropagation();
    this.moveElementInitiated = true;
    this.tempCoords = {
      left : event.offsetX,
      top : event.offsetY
    };
  }
  public onMove(event: MouseEvent): void {
    if (this.moveElementInitiated) {
      const tempLeft = (event.offsetX - this.tempCoords.left) / this.ratio;
      const tempTop = (event.offsetY - this.tempCoords.top) / this.ratio;
      this.style = {
        position: 'absolute',
        left: `${this.checkBoundariesLeft(Number.parseInt(this.style.left), tempLeft)}px`,
        right: `${this.checkBoundariesRight(Number.parseInt(this.style.right), tempLeft)}px`,
        top: `${this.checkBoundariesTop(Number.parseInt(this.style.top), tempTop)}px`,
        bottom: `${this.checkBoundariesBottom(Number.parseInt(this.style.bottom), tempTop)}px`,
        width: this.style.width,
        height: this.style.height
      };
    }
  }
  public finalPosition(event): void {
    this.moveElementInitiated = false;
  }

我应该注意，所有函数都更新组件中的相同样式对象。

Answer 2

您可以使用Moves方法仅允许从某个区域拖动：

constructor(private dragulaService: DragulaService) {
this.dragulaService.createGroup("CARDS", {
  direction: "vertical",
  moves: (el, source, handle): boolean => handle.className.indexOf("ri-card-header") > -1
});
}

通过这种方式，您可以指定CSS选择器以确定是否允许移动。如果移动方法返回false，则将转发事件，并且将无法开始移动。