Перетащите пользовательское поведение - PullRequest
Новая
       32

Перетащите пользовательское поведение

0 голосов
/ 23 января 2020

Я пытаюсь реализовать это поведение 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.В настоящее время при перетаскивании текста, текст будет удален (визуально) из источника. Мне нужна опция, позволяющая элементу оставаться видимым в источнике даже при его появлении в цели.

Как получить желаемое поведение? Спасибо!

1 Ответ

1 голос
/ 23 января 2020

Разван, я знаю, что cdkDrag всегда говорит о Списке, но вам не нужно использовать список. если у наших «предметов» есть свойства сверху и слева, мы можем рисовать в его положении.

Вы можете иметь зону сброса, например 

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

В ходу мы сохраняем позицию указателя 

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

В выпадающем режиме вычисляем позицию 

  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

Для «не исчезать» я думаю, что единственный способ - сделать «фиксированную копию» за зоной перетаскивания, например, это еще один ответ в SO

...