angular - Angular2中如何实现拖拽？

Question

我想使用 Angular 2 实现拖放操作。我有一些项目:

<div class="item"></div>

我希望能够将其拖放到容器中:

<div class="container"></div>

我找不到在 Angular 2 中执行此操作的任何好的信息来源。我找到了这个文件:https://github.com/AngularClass/angular2-examples/blob/master/rx-draggable/directives/draggable.ts我试过了，但我无法让它工作，我也不完全确定它应该如何工作。

我该如何实现？

Answer 1

试试这个:

function onDragStart(event, data) {
  event.dataTransfer.setData('data', data);
}
function onDrop(event, data) {
  let dataTransfer = event.dataTransfer.getData('data');
  event.preventDefault();
}
function allowDrop(event) {
  event.preventDefault();
}

<div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"></div>
<div draggable="true" (dragstart)="onDragStart($event, dragData)"></div>