Angular 元素拖拽

袁建木
2023-12-01
  • 拖动元素到指定区域

  • 拖放的同时传递数据


1. 安装 ng2-drag-drop

    npm install ng2-drag-drop --save

2. 模板中配置可拖拽元素

    // drag.component.html
    <div>
        <a href="javascript:;" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'system'">{{ item.name }}</a>
    </div>
  • draggable - 表明此元素时可拖拽的

  • [dragData] = 'item' - 在拖动过程中将item数据从draggable到droppable

  • [dragScope]="'system'" - 拖拽范围,和第三步[dropScope]="'system'"相对应;

3. 模板中配置拖拽元素所拖拽的目的地

    // drag.component.ts
    <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>
  • droppable - 第二步中拖拽的元素都将拖拽到有droppable指令的元素内;

  • (onDrop) - 当拖拽元素至此区域内后(鼠标释放后),触发onItemDrop方法,其中$event就是第二步中[dragData] = 'item'的item参数

  • [dropScope]="'system'" - 和第二步的[dragScope]="'system'"对应,[dragScope]="'system'"的拖拽元素只能拖拽到 [dropScope]="'system'"元素内;

4. ts文件


// drag.component.ts
export class DragComponent {

    const sysData = [
        {id: '1', name: '拖动元素1'},
        {id: '2', name: '拖动元素2'},
        {id: '3', name: '拖动元素3'},
        {id: '4', name: '拖动元素4'}
    ];

}

onItemDrop(e: any) {
    // data为拖拽时传递的数据 - item
    const data = e.dragData;

}

转载于:https://www.cnblogs.com/zero-zm/p/9859129.html

 类似资料: