HTML 5与Angular 4的拖放

Question

我正在尝试让原生HTML5拖放在我的angular应用程序中工作。我得到了拖拽，触发了拖拽和dragOver事件，但不幸的是，拖放没有触发任何东西。下面是HTML和拖动事件的代码。

<ul *ngFor="let channel of channelList" >
      <li class="list-group-item" *ngIf="channel.channel.substr(0, 1) === head" 
      style="float:left; margin:0.5px" draggable="true" (dragstart)="drag(channel)">
        <ng-container *ngIf="channel.compChannel.compChannelLogo.length !== 0; else noCompChannel">
          <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" width="100" height="100">
          <img class="img-rounded" src="{{ channel.compChannel.compChannelLogo }}" alt="{{ channel.channel.compChannelName }}" width="100" height="100">
        </ng-container>
        <ng-template #noCompChannel>
          <img class="img-rounded" src="{{ channel.logo }}" alt="{{ channel.channel }}" 
          width="100" height="100" >
        </ng-template>
      </li>
    </ul>
<ul class="list-group" *ngFor="let channels of currentPickSelection" dropzone="copy">
  <li class="list-group-item" style="float:Left; margin-left:0.5px" (dragover)="dragOver(channels[0])" (dragend)="drop(event)">
    <ng-container *ngIf="channels[0].compChannel.compChannelLogo.length !== 0; else noCompChannel">
      <img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
      <img class="img-rounded" src="{{ channels[0].compChannel.compChannelLogo }}" alt="{{ channels[0].compChannel.compChannelName }}"
        width="70" height="70">
    </ng-container>
    <ng-template #noCompChannel>
      <img class="img-rounded" src="{{ channels[0].logo }}" alt="{{ channels[0].channel }}" width="70" height="70">
    </ng-template>
    <br>
    <strong>
      <font size="2">{{ channels[0].pickCode }}</font>
    </strong>
  </li>
</ul>



drag(channel) {
    console.log(channel);
  }
  dragOver(channel) {
    this.draggedChannel = channel;
    // console.log(this.draggedChannel);
  }

  drop(e) {
    console.log(e);
  }

Answer 1

我在Angular 2/4/5/6中没有任何其他模块，你也可以使用下面的代码来实现它：

drag.component.html:

<h2>Drag and Drop demo</h2>
<div  id="div1" 
      (drop)="drop($event)" 
      (dragover)="allowDrop($event)">

      <img 
      src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350" 
      draggable="true" 
      (dragstart)="drag($event)" 
      id="drag1"
      width="88" 
      height="31">
</div>

<div id="div2" 
  (drop)="drop($event)" 
  (dragover)="allowDrop($event)">
</div>

drag.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'drag-root',
  templateUrl: './drag.component.html',
  styleUrls: ['./drag.component.css']
})
export class AppComponent {

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }
}

drag.component.css:

#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

Stackblitz example

Answer 2

<div (dragover)="onDragOver($event)" 
     (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">
</div>

在您的组件中：

onDrop(event: any) {
    event.preventDefault();
    event.stopPropagation();
    // your code goes here after droping files or any
}

onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();
}

onDragLeave(evt) {
    evt.preventDefault();
    evt.stopPropagation();
}

Answer 3

简单但功能最强大的软件包

支持angular版本>= 4.x

对于documentation

对于demo

怎么用？

安装

// if you use npm
npm install angular2-draggable

// or if you use yarn
yarn add angular2-draggable

导入

import { AngularDraggableModule } from 'angular2-draggable';

@NgModule({
  imports: [
    ...,
    AngularDraggableModule
  ],
})
export class AppModule { }

并最终使用

// Basic Usage
<div ngDraggable>Drag Me!</div>