Angular 2/4+ 拖放组件

Angular 2/4+ 拖放组件
插件名称 ng-avatar-drag-drop
发布时间 2020年7月24日
插件作者 havryliv

适用于Angular 2及更高版本的拖放组件,无需使用HTML5且没有外部依赖项。

安装:

npm install ng-avatar-drag-drop –save

用法

更新SystemJS配置

如果使用SystemJS作为模块加载器,则需要更新配置以加载ng-avatar-drag-drop模块。

System.config({
    map: {
        'ng-avatar-drag-drop': 'node_modules/ng-avatar-drag-drop'
    },
    packages: {
        'ng-avatar-drag-drop':  { main: 'index.js',  defaultExtension: 'js' },
    }
});

导入 NgAvatarDragDropModule

您需要NgAvatarDragDropModule在要使用的应用程序模块中导入。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DemoComponent } from "./components/demo-component";
import { NgAvatarDragDropModule } from 'ng-avatar-drag-drop';



@NgModule({
  imports: [
      BrowserModule, 
      NgAvatarDragDropModule.forRoot()
  ],
  declarations: [DemoComponent],
  bootstrap: [DemoComponent]
})
export class AppModule {}

使用ngAvatarDraggablengAvatarDroppable指令

ngAvatarDraggable指令放置在要拖动的元素上。以下示例使“列表”项目可拖动:

<ul>
  <li ngAvatarDraggable>Coffee</li>
  <li ngAvatarDraggable>Tea</li>
  <li ngAvatarDraggable>Milk</li>
</ul>     

类似地ngAvatarDroppable,在要删除的元素上使用指令draggable

<div ngAvatarDroppable>
  <p>Drop items here</p>
</div>