在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
}