feat:拖拽优化
This commit is contained in:
@@ -23,6 +23,8 @@
|
|||||||
:get-child-payload="getChildPayload"
|
:get-child-payload="getChildPayload"
|
||||||
drag-class="drag-ghost"
|
drag-class="drag-ghost"
|
||||||
drop-class="drop-ghost"
|
drop-class="drop-ghost"
|
||||||
|
drag-handle-selector=".drag-handle"
|
||||||
|
:non-drag-area-selector="'.column-name, .ant-checkbox-wrapper'"
|
||||||
>
|
>
|
||||||
<Draggable
|
<Draggable
|
||||||
v-for="(column, index) in customColumns"
|
v-for="(column, index) in customColumns"
|
||||||
@@ -383,11 +385,22 @@ function clearProblematicCache() {
|
|||||||
|
|
||||||
.drag-handle {
|
.drag-handle {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
cursor: move;
|
cursor: grab;
|
||||||
color: #999;
|
color: #999;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #1890ff;
|
color: #1890ff;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
color: #0050b3;
|
||||||
|
background-color: #e6f7ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -396,6 +409,8 @@ function clearProblematicCache() {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
pointer-events: auto;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
.column-name {
|
.column-name {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -405,6 +420,12 @@ function clearProblematicCache() {
|
|||||||
display: none; // 隐藏标签
|
display: none; // 隐藏标签
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 禁止复选框触发拖拽
|
||||||
|
:deep(.ant-checkbox-wrapper) {
|
||||||
|
pointer-events: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user