拖放自定义行为 [英] 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 但我有一些问题:

$('.dragger').draggable({回复:无效"，帮手:函数(){//代码在这里return $("<div class='dragger'></div>").append("Hi");}});$(".dropper").droppable({下降:功能(事件，用户界面){$(这个).addClass("ui-state-highlight").find("p").html("掉线了！");var element = $('.ui-draggable-dragging');var currentDrop=$(this);返回 element.clone().appendTo(currentDrop);}});

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

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

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

解决方案

Razvan，我知道 cdkDrag 总是在谈论 List，但您不必使用列表.如果我们的items"有 top 和 left 属性，我们就可以在他的位置上绘制.

你可以有一个拖放区

<div #dropZone class="dropZone" cdkDropList id="drop-list"(cdkDropListDropped)="itemDropped($event)"><div *ngFor="let field of fields;"cdk拖拽风格=位置:绝对；z-index:10"[style.top]="field.top"[style.left]="field.left">{{field.text}}

还有一个列表

 
{{type.text}}<div *cdkDragPlaceholder class="field-placeholder"></div>

在移动中我们存储指针的位置

 移动(事件:CdkDragMove){this._pointerPosition=event.pointerPosition;}

在下降计算位置

 itemDropped(event: CdkDragDrop) {if (event.previousContainer === event.container) {moveItemInArray(this.fields, event.previousIndex, event.currentIndex);} 别的 {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 中的另一个答案

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!

解决方案

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

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