拖放自定义行为

Question

我尝试实现这种行为http://jsfiddle.net/Aneeshmohan/qbxfbmtt/ 在 Angular 8 中。我使用 Angular cdk 拖放模块 https://stackblitz.com/edit/angular-4ppaey?file=src%2Fapp%2Fapp.module.ts 但我有一些问题：

$('.dragger').draggable({
    revert: "invalid",
    helper: function () {
        //Code here
        return $("<div class='dragger'></div>").append("Hi");
    }
});


$(".dropper").droppable({
    drop: function (event, ui) {

        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");

        var element = $('.ui-draggable-dragging');
        var currentDrop=$(this);
        return element.clone().appendTo(currentDrop);
    }
});

1.我想将元素放在某个位置，但不是那样，而是将元素放在左上角。

2.目前在拖动文本时，文本将从源中（视觉上）删除。我想要一个选项，即使项目出现在目标中，也可以在源中保持可见。

如何获得所需的行为？谢谢！

Answer 1

Razvan，我知道 cdkDrag 总是在谈论 List，但您不必使用列表。如果我们的“项目”具有 top 和 left 属性，我们可以在他的位置上绘制。

你可以有一个像这样的拖放区

<div #dropZone class="dropZone" cdkDropList id="drop-list" 
       (cdkDropListDropped)="itemDropped($event)">
    <div *ngFor="let field of fields;" cdkDrag
           style="position:absolute;z-index:10" 
           [style.top]="field.top" 
           [style.left]="field.left">
           {{field.text}}
     </div>
</div>

还有一个列表

   <div id="div1" cdkDrag cdkDropList 
        cdkDropListConnectedTo="drop-list" 
        *ngFor="let type of types"
        [cdkDragData]="type" (cdkDragMoved)="moved($event)">
        {{type.text}}
        <div *cdkDragPlaceholder class="field-placeholder"></div>

    </div>

在 move 中我们存储指针的位置

  moved(event: CdkDragMove) {
    this._pointerPosition=event.pointerPosition;
  }

在drop中计算位置

  itemDropped(event: CdkDragDrop<any[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(this.fields, event.previousIndex, event.currentIndex);
    } else {
      event.item.data.top=(this._pointerPosition.y-this.dropZone.nativeElement.getBoundingClientRect().top)+'px'
      event.item.data.left=(this._pointerPosition.x-this.dropZone.nativeElement.getBoundingClientRect().left)+'px'
      this.addField({...event.item.data}, event.currentIndex);
    }
  }

见stackblitz

对于“不要消失”，我认为唯一的方法是在拖动区域后面制作一个“固定副本”，有些像this another answer in SO