拖放自定义行为 [英] Drag and drop custom behavior

问题描述

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

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.我想将元素放置在某个位置，但要代替它，而是将元素放置在左上角.

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.当前，当拖动文本时，文本将从源中删除(视觉上).我想要一个选项，使该项目即使在目标中出现也可以在源中保持可见.

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!

推荐答案

Razvan，我知道cdkDrag总是在谈论List，但是您不必使用列表.如果我们的项目"具有顶部和左侧的属性，则可以绘制其位置.

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>

还有一个列表

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

在下拉菜单中计算位置

  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

对于不要消失"，我认为唯一的方法是在拖动区域后面制作固定副本"，例如

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

这篇关于拖放自定义行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！