Drag and drop custom behavior

问题

I try to implement this behavior http://jsfiddle.net/Aneeshmohan/qbxfbmtt/ in angular 8. I use angular cdk drag-drop module https://stackblitz.com/edit/angular-4ppaey?file=src%2Fapp%2Fapp.module.ts but I have some problems:

$('.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.I want to drop the element in a certain position, but instead of that, the element is placed in the top left corner.

2.Currently when dragging the text, the text will get removed (visually) from the source.I want an option to allow the item to stay visible in the source even when appearing in the target.

How to get the desired behavior? Thanks!

回答1:

Razvan, I know the cdkDrag is talking always about List, but you needn't use a list. if our "items" has as properties top and left, we can draw in his position.

You can have a drop zone like

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

And a list

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

In move we store the position of the pointer

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

In dropped calculate the position

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

see the stackblitz

For "don't desapear" I think that the only way is make a "fixed copy" behind the drag zone, some like this another answer in SO

来源：https://stackoverflow.com/questions/59881107/drag-and-drop-custom-behavior

标签

angular

drag-and-drop

angular-material

copy

angular8