位置: IT常识 - 正文

sortablejs的使用实践(sortable js)

编辑:rootadmin
sortablejs的使用实践 文章目录说明基本使用1. 素颜版2. 设置可被拖起的项的样式3. 设置被选中的项的样式4. 设置拖拽时跟随的阴影的样式5. 设置正在被拖拽中的样式6. 设置当前列表容器内是否可以进行拖拽排序7. 设置拖拽的手柄8. 多个列表之间的拖拽 [group]示例1 [name]示例2 [put]示例3 [put function]示例4 [pull]9. 多个拖拽组嵌套学习来源

推荐整理分享sortablejs的使用实践(sortable js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:sorttablejs 文档,sortable js,sort()js,sorttablejs 文档,sortablejs react,sortablejs原理,sortablejs原理,sortable js,内容如对您有帮助,希望把文章链接给更多的朋友!

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',};sortablejs的使用实践(sortable js)

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

本文链接地址:https://www.jiuchutong.com/zhishi/298478.html 转载请保留说明!

上一篇:【云原生 | 21】Docker运行Web服务实战之Apache(云原生istio)

下一篇:Anaconda(python,pycharm)半详细安装教程

  • 钉钉怎么设置不让别人看名片(钉钉怎么设置不自动打卡)

    钉钉怎么设置不让别人看名片(钉钉怎么设置不自动打卡)

  • 微信号码怎么修改(微信号码怎么修改第二次)

    微信号码怎么修改(微信号码怎么修改第二次)

  • 钉钉重新提交作业老师会知道吗(钉钉重新提交作业老师知道吗)

    钉钉重新提交作业老师会知道吗(钉钉重新提交作业老师知道吗)

  • 苹果手机耳机模式退不出来了怎么解决(苹果手机耳机模式怎么调回来)

    苹果手机耳机模式退不出来了怎么解决(苹果手机耳机模式怎么调回来)

  • 微信语音老是连接失败(微信语音老是连接中断是怎么回事)

    微信语音老是连接失败(微信语音老是连接中断是怎么回事)

  • 华为手机滑屏特效在哪里设置(华为手机滑屏功能)

    华为手机滑屏特效在哪里设置(华为手机滑屏功能)

  • 华为mate30双卡位置(mate30 双卡)

    华为mate30双卡位置(mate30 双卡)

  • 淘宝卖家拒绝七天无理由退货(如果淘宝卖家拒绝退款会有什么样的处理)

    淘宝卖家拒绝七天无理由退货(如果淘宝卖家拒绝退款会有什么样的处理)

  • win10桌面文件夹路径是什么(win10桌面文件夹路径)

    win10桌面文件夹路径是什么(win10桌面文件夹路径)

  • 宽带ip地址是固定的吗(宽带ip是固定的吗)

    宽带ip地址是固定的吗(宽带ip是固定的吗)

  • 为什么两张电信卡无法同时使用(为什么两张电信卡)

    为什么两张电信卡无法同时使用(为什么两张电信卡)

  • 清除单元格内容按什么键(清除单元格内容快捷键是什么)

    清除单元格内容按什么键(清除单元格内容快捷键是什么)

  • 电脑响是怎么回事(电脑zz响)

    电脑响是怎么回事(电脑zz响)

  • 微信上的共享位置可以自己设置吗(微信上的共享位置如何修改公司地址)

    微信上的共享位置可以自己设置吗(微信上的共享位置如何修改公司地址)

  • 苹果听语音屏幕黑屏(苹果听语音屏幕黑屏解决方法)

    苹果听语音屏幕黑屏(苹果听语音屏幕黑屏解决方法)

  • rtm是什么(rtm2)

    rtm是什么(rtm2)

  • 有哪些可以货到付款的购物网站(什么平台可以货到付款而且比较便宜)

    有哪些可以货到付款的购物网站(什么平台可以货到付款而且比较便宜)

  • 手机为什么突然就关机了呢(手机为什么突然关机)

    手机为什么突然就关机了呢(手机为什么突然关机)

  • 小米初始空间密码是啥(小米初始空间密码忘了)

    小米初始空间密码是啥(小米初始空间密码忘了)

  • 爱奇艺怎么解绑手机号(爱奇艺怎么解绑qq号)

    爱奇艺怎么解绑手机号(爱奇艺怎么解绑qq号)

  • 抖音怎么查到对方身份(抖音怎么查到对方真实信息)

    抖音怎么查到对方身份(抖音怎么查到对方真实信息)

  • 怎么写简历中的自我评价(怎么写简历中的教育经历)

    怎么写简历中的自我评价(怎么写简历中的教育经历)

  • 怎么设置锁屏禁止关机(怎么设置锁屏状态下禁止关机)

    怎么设置锁屏禁止关机(怎么设置锁屏状态下禁止关机)

  • node.js安装及环境配置超详细教程【Windows系统安装包方式】(nodejs安装及环境配置win7)

    node.js安装及环境配置超详细教程【Windows系统安装包方式】(nodejs安装及环境配置win7)

  • 资源税改革是什么意思
  • 物流企业怎么做大做强?
  • 税务局核定税种是什么意思
  • 银行代发工资必须交社保吗
  • 政府回购安置房几种模式
  • 未收回的货款是企业资产吗
  • 技术服务费3%
  • 预缴的增值税怎么算
  • 进项税加计扣除什么时候开始的
  • 房地产开发企业预收款预缴增值税
  • 购入库存商品未付款怎么做账
  • 来料加工企业的人工工资计入什么费用
  • 交通补贴补贴可以税前扣除吗?
  • 企业常见的股利政策
  • 小规模企业没有进项发票怎么办
  • 工会经费滞纳金税率
  • 国际货运代理免税
  • 销售坚果税率多少
  • 小企业会计准则和企业会计准则的区别
  • 计提养老保险会计分录怎么做
  • 土地租赁协议和合同有什么区别
  • 购买基金会计核算
  • 企业延期缴纳税款
  • 工程物资期末余额应在资产负债表中填列?
  • 水土保持补偿费收费依据
  • 财务线上线下是什么意思
  • php获取远程文件扩展名
  • 弥补以前年度亏损怎么填申报表
  • 对公账户转到私人账户要手续费吗
  • 行政单位捐赠收入需要上缴财政吗
  • php图片加文字水印
  • 预计负债的所得税怎么算
  • 房产税会计科目有哪些
  • 蒙塔巴诺督查
  • 动态模型图如何制作
  • php批量上传图片到服务器
  • 自动驾驶数据集 mev
  • 代发工资怎么做
  • 职工教育经费申报表如何填写
  • 补充医疗保险属于什么
  • wordpress批量生成文章
  • web开发百度百科
  • mysql数据库如何回滚
  • 织梦是啥
  • 收回已冲销的应收账款会计分录
  • 金税盘问题
  • sql server 实现数据值加一减一
  • 使用sqlserver创建数据库和删除数据库的实验总结
  • 电脑访问另一台电脑访问权限
  • 小微企业所得税怎么算
  • 一般纳税人增值税申报操作流程
  • 什么叫查账征收和核定征收
  • 出口不报关账务处理
  • 出口退税如何做进料核销凭证
  • 逾期交房违约金 已支付金额
  • 总公司与分公司关系证明模板
  • 应收账款收不回来的情况说明
  • 月末结转销售会计分录
  • 营改增小规模纳税人可以进行税额扣除
  • 收据大写后面的字怎么写
  • 代扣款分录
  • 个人微信转账可以给对方开发票吗
  • 首次计提坏账准备应计入
  • 小企业会计准则调整以前年度费用分录
  • 挂靠建筑公司预交的增值税如何做凭证?
  • 企业增资的流程
  • Win7旗舰版系统安装
  • Win10预览版拆弹
  • vnc远程桌面linux
  • 360win7
  • windows102021年更新
  • css百分比进度条
  • jquery选择器的使用
  • 玩转cmd命令
  • node中异步编程模式使用什么捕获异常
  • python多线程异常后所有线程均不往下执行
  • 江苏省税务局官网电话
  • 沈阳税务发票查询系统
  • 没有核定印花税可以按次申报吗
  • 城市维护建设税的计税依据
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设