实现 Angular 可拖动 droppable，我如何将 DIV 放在一个地方并保持在那里答案

【问题标题】：Implementing Angular draggable droppable, how can I drop a DIV at a place and it stays there实现 Angular 可拖动 droppable，我如何将 DIV 放在一个地方并保持在那里
【发布时间】：2017-11-28 09:04:18
【问题描述】：

我正在使用https://mattlewis92.github.io/angular-draggable-droppable/demo/

我可以拖动我的 Div，如下图所示，我想要的是，如果我将 DIV 3 拖动到 DIV 1 上，那么 DIV 3 应该就位，其他 DIV 应该向下滑动。

我的dragdrop.component.ts 代码：

import { Component, OnInit, NgModule } from '@angular/core';
import {DragAndDropModule} from 'angular-draggable-droppable';

@Component({
  selector: 'app-dragdrop',
  templateUrl: './dragdrop.component.html',
  styleUrls: ['./dragdrop.component.css']
})
export class DragdropComponent implements OnInit {
droppedData: string;

  constructor() { }

  ngOnInit() {
  }

  dragEnd(event) {
    console.log('Element was dragged', event);
  }

}

还有我的dragdrop.component.html 代码：

<br><br>
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag DIV  1</div>
<br><br>
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag DIV  2</div>
<br><br>
<div mwlDraggable (dragEnd)="dragEnd($event)">Drag DIV  3</div>

    <div

      (drop)="this.droppedData = $event.dropData">

      <span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
    </div>

【问题讨论】：

标签： javascript jquery angular typescript

【解决方案2】：

我推荐你使用一个非常方便的Angular Material插件cdk来实现drag & drop应用。

https://material.angular.io/cdk/drag-drop/overview

希望这会有所帮助。

【讨论】：