拖放自定义行为

Question

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

$('.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，但你不需要使用列表。 如果我们的"项目"在顶部和左侧都有 as 属性，我们可以绘制他的位置。

你可以有一个放置区，例如

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

查看堆栈闪电战

对于"不要消失"，我认为唯一的方法是在拖动区域后面制作一个"固定副本"，有些像这样的 SO 中的另一个答案