vue3中a-table使用sortablejs设置了列拖动时,固定列处理

在a-table中,如果设置了列可以拖动位置,在有固定列时,固定列应该是不可以拖动的,可以拖动的列也不能拖动到固定列的位置。

其他地方使用sortablejs想要实现:1特定元素不可拖动,2特定区域不可能拖入时,道理相通。

1.固定列不可拖动

在初始化Sortable时,加filter配置项,配置项内容为固定列特有的class

Sortable.create(tHeader as HTMLElement, {
   ...otherOptions,
   filter: `.ant-table-selection-column, .ant-table-cell-fix-left, .ant-table-cell-fix-right`,
})

2.其他列不可拖动到固定列的位置

如果要让拖动不生效,逻辑需要写到 onMove配置项里,不能放到onEnd中

onMove函数文档如下:

// 拖拽移动的时候
 onMove: function (/**Event*/evt, /**Event*/originalEvent) {
   // Example: https://jsbin.com/nawahef/edit?js,output
   evt.dragged; // dragged HTMLElement 
   evt.draggedRect; // DOMRect {left, top, right, bottom}
   evt.related; // HTMLElement on which have guided
   evt.relatedRect; // DOMRect
   evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
   originalEvent.clientY; // mouse position
   // return false; — for cancel
   // return -1; — insert before target
   // return 1; — insert after target
 }

 当返回值为false时,拖动取消,所以在代码中添加下方代码可以实现效果:

onMove: evt => {
  //当释放点的节点class中包含特定class的情况下,返回false,取消拖动
  return evt.related.className.indexOf(`ant-table-cell-fix`) === -1
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值