javascript - Implementera Angular dragbar och släppbar, hur kan jag släppa en DIV på en plats och den stannar där

Jag använder https://mattlewis92.github.io/angular-draggable-droppable/demo/

Jag kan dra mina Divs som ses på bilden nedan, det jag vill är att om jag drar DIV 3 på DIV 1 så ska DIV 3 sätta sig på sin plats och de andra DIVarna ska glida ner.

Min dragdrop.component.ts-kod:

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

}

och min dragdrop.component.html-kod:

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

Svar #1

Vänligen titta på detta exempel https://stackblitz.com/edit/angular-draggable-droppable-example1

Svar #2

Jag rekommenderar dig att använda ett mycket praktiskt plugin till Angular Material som heter cdk för att implementera en drag & drop-applikation.

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

Hoppas det här hjälper.

Relaterade artiklar