sortablejs 是一个强大的JavaScript拖拽库   
    
    
。

说明

在Angular项目中使用sortablejs拖拽库时    
    
   ，我们需要同时使用 ngx-sortablejs 这个二次封装的Angular拖拽库    


     


     

，它封装了 sortablejs 指令 




 




 




，并支持以下参数：

@Directive({ selector: "[sortablejs]", }) export class SortablejsDirective { // 拖拽列表的数据项 @Input() sortablejs: SortableData; // array or a FormArray // 指定拖拽的容器 @Input() sortablejsContainer: string; // 拖拽相关的配置项 @Input() sortablejsOptions: Options; @Input() sortablejsCloneFunction: (item: any) => any; // 在一个拖拽实例被创建并初始化好之后   

   

  ，会立即emit出这个拖拽实例


     


     


   。 @Output() sortablejsInit = new EventEmitter<Sortable>() }

基本使用

1. 素颜版

<div class="container" [sortablejs]="items" [sortablejsOptions]="draggableOptions" > <div *ngFor="let item of items" class="item"> {{ item.name }} </div> </div> import { SortableOptions } from sortablejs; draggableOptions: SortableOptions = {};

2. 设置可被拖起的项的样式

<div class="container" [sortablejs]="items" [sortablejsOptions]="draggableOptions" > <ng-container *ngFor="let item of items"> <div *ngIf="item.id !== 002" class="item sortable-item"> {{ item.name }} </div> <div *ngIf="item.id === 002" class="item"> {{ item.name }}     

     

     
，这个项不可被拖起 </div> </ng-container> </div> draggableOptions: SortableOptions = { // 允许拖拽的项的类名




  




  




，只有这个类名的项才可以拖起 draggable: .sortable-item, }; .sortable-item { background-color: antiquewhite; }

3. 设置被选中的项的样式

draggableOptions: SortableOptions = { // 拖拽项被选中时的类名 chosenClass: sortable-chosen, }; .sortable-chosen { background-color: lightblue; }

4. 设置拖拽时跟随的阴影的样式

draggableOptions: SortableOptions = { // 项被拖拽的过程中跟随它的那个影子的类名 ghostClass: sortable-ghost, }; .sortable-ghost { background-color: lightgray; }

5. 设置正在被拖拽中的样式

draggableOptions: SortableOptions = { dragClass: sortable-drag, }; .sortable-drag { background-color: orange; border-bottom: none; }

6. 设置当前列表容器内是否可以进行拖拽排序

draggableOptions2: SortableOptions = { sort: false, // 值为false
  


  


 ，组内不可拖拽排序 group: { name: china, pull: true, // 组内的项可以被拖出去到其它组 } };

7. 设置拖拽的手柄

<div class="container" [sortablejs]="items" [sortablejsOptions]="draggableOptions" > <div *ngFor="let item of items" class="item sortable-item"> <div class="sortable-handle">手柄</div> {{ item.name }} </div> </div> draggableOptions: SortableOptions = { // draggable: .sortable-item, // 可拖拽项的手柄的类名     
     
     ，只有按住手柄才能拖起 




 




 

。（如果将上面那行注释放开 




   




   




，那就不只有手柄能拖拽了） handle: .sortable-handle, };

8. 多个列表之间的拖拽 [group]

示例1 [name]

配置项的group属性里的name相同的两个拖拽组之间的项可以互相拖拽   

   

   

。

// 甲组 draggableOptions1: SortableOptions = { group: { name: wmm, } }; // 乙组 draggableOptions2: SortableOptions = { group: { name: wmm, } };

示例2 [put]

多个拖拽组

 



 



，name不同时               ，可以通过 put 指定其它组只有满足条件的项可以拖进当前列表

     

     

  。

// 甲组 draggableOptions1: SortableOptions = { group: { name: wmm, } }; // 乙组 draggableOptions2: SortableOptions = { group: { name: china, } }; // 丙组 draggableOptions3: SortableOptions = { group: { name: happy, /** * put字段的值可以指定为以下四种： * true: 可以将其它指定组的项拖进本组 * false: 其它任何组的项都不能拖到本组 * [wmm, china]: 只能将甲组和乙组的项拖到本组
  




  




  
。[china]: 只能将乙组的项拖到本组  


  


  


。 * function: 自定义函数  




    




    



，可进行复杂逻辑判断












，根据返回true或false              ，来判断当前被拖拽的项是否能往本组里放 
     
     
 。 */ put: [china], // 指定甲组和乙组的项可以往丙组里面放 } };

示例3 [put function]

多个拖拽组   



     



     


，可以通过指定 put 的值为function













，在function里进行复杂判断来确定被拖拽的项是否可以被拖进本组

   




   




   。

<div class="container2" [sortablejs]="items2" [sortablejsOptions]="draggableOptions2" > 乙组 <div *ngFor="let item of items2" class="item sortable-item2" [ngClass]="{ can-move-to-happy: item.name.indexOf(乙 5) === -1 }" > {{ item.name }} {{ item.name.indexOf("乙 5") !== -1 ? "--该项不可用被拖进丙组" : "" }} </div> </div> // 乙组 draggableOptions2: SortableOptions = { group: { name: china, } }; // 丙组 draggableOptions3: SortableOptions = { group: { name: happy, /** * put的值可以是一个自定义function    
    
   ，可进行复杂逻辑判断 



 



 



。 * 根据返回true或false    


     


     

，来判断当前被拖拽的项是否能往本组里放            。 */ put: ( to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent ) => { // 判断：只有带有样式类名为can-move-to-happy的项




 




 




，才能被拖进本组


    




    




    。 return dragEl?.classList.contains(can-move-to-happy); }, } };

示例4 [pull]

draggableOptions2: SortableOptions = { group: { name: china, /** * 从一个列表中拖动到另一个列表时   

   

  ，是否允许拖动













。 默认值：true             。 * true：允许拖动 * false：不允许拖动 * clone：克隆一个副本拖到其它组 * function：自定义函数     

     

     
，可进行复杂逻辑判断




  




  




，根据返回true或false
  


  


 ，来判断被拖拽的项是否可从本组移出去


     



     



    。 */ pull: ( to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent ) => { return !dragEl?.classList.contains(can-move-to-happy); }, }, };

此示例就不截图了












。

9. 多个拖拽组嵌套

<div class="grandpa-container" [sortablejs]="treeItems" [sortablejsOptions]="draggableOptions" > <div *ngFor="let grandpa of treeItems" class="item" [id]="grandpa.id" [ngClass]="{ a: grandpa.name.indexOf(甲) !== -1, b: grandpa.name.indexOf(乙) !== -1, c: grandpa.name.indexOf(丙) !== -1 }" > {{ grandpa?.name }} <ng-container *ngIf="grandpa?.children?.length"> <div class="father-container" [id]="grandpa.id" [sortablejs]="grandpa?.children" [sortablejsOptions]="draggableOptions" > <div *ngFor="let father of grandpa?.children" class="item" [id]="father.id" [ngClass]="{ a: father.name.indexOf(甲) !== -1, b: father.name.indexOf(乙) !== -1, c: father.name.indexOf(丙) !== -1 }" > {{ father?.name }} <ng-container *ngIf="father?.children?.length"> <div class="son-container" [id]="father.id" [sortablejs]="father?.children" [sortablejsOptions]="draggableOptions" > <div *ngFor="let son of father?.children" class="item" [id]="son.id" [ngClass]="{ a: son.name.indexOf(甲) !== -1, b: son.name.indexOf(乙) !== -1, c: son.name.indexOf(丙) !== -1 }" > {{ son?.name }} </div> </div> </ng-container> </div> </div> </ng-container> </div> </div> public draggableOptions: SortableOptions = { group: { name: wmm, } // 元素 从其它拖拽分组 拖进 本拖拽分组 时触发 onAdd: (event: SortableEvent) => { console.log(onAdd event:, event); console.log(自身id:, event.item.id); console.log(当前所属父id:, event.to.id); console.log(在当前分组中的index:, event.newIndex); }, // 元素在本拖拽分组中的位置发生改变时触发 onUpdate: (event: SortableEvent) => { console.log(onUpdate event：, event); }, }; public treeItems: { id: string; name: string; children?: any[] = []; } = []; ngOnInit(): void { // 初始化 treeItems for (let i = 0; i < 5; i++) { let grandpa: any = { id: `0${i}`, name: `甲 0${i}`, children: [] }; if (i === 1) { let fathers: any = []; for (let j = 0; j < 5; j++) { const fatherItem: any = { id: `00${j}`, name: `乙 00${j}`, }; if (j === 4) { let sons: any = []; for (let k = 0; k < 5; k++) { const sonItem = { id: `000${k}`, name: `丙 000${k}`, }; sons.push(sonItem); } fatherItem.children = sons; } fathers.push(fatherItem); } grandpa.children = fathers; } this.treeItems.push(grandpa); } }

第一次拖拽：

第二次拖拽：

学习来源

更多配置项及回调方法： http://www.sortablejs.com/options.html

更多示例： http://sortablejs.github.io/Sortable/

Sortable仓库： https://github.com/SortableJS/Sortable

ngx-sortablejs仓库 https://github.com/sortablejs/ngx-sortablejs#readme