fix: 修复题目未聚焦时拖拽按钮失效问题 (#375)

Co-authored-by: jiangchunfu <[email protected]>
didi · Aug 4, 2024 · 9d89a1c · 9d89a1c
1 parent 517906f
commit 9d89a1c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/web/src/management/pages/edit/components/MaterialGroup.vue b/web/src/management/pages/edit/components/MaterialGroup.vue
@@ -1,8 +1,8 @@
 <template>
   <draggable
     v-model="renderData"
-    handle=".question-wrapper.isSelected"
-    filter=".question-wrapper.isSelected .question.isSelected"
+    handle=".question-wrapper.is-move"
+    filter=".question-wrapper.is-move .question.isSelected"
     :preventOnFilter="false"
     :group="DND_GROUP"
     :onEnd="checkEnd"

diff --git a/web/src/management/pages/edit/components/QuestionWrapper.vue b/web/src/management/pages/edit/components/QuestionWrapper.vue
@@ -1,14 +1,19 @@
 <template>
   <div
-    :class="itemClass"
+    :class="[itemClass, { 'is-move': isSelected || isMove }]"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
     @click="clickFormItem"
   >
     <div><slot v-if="moduleConfig.type !== 'section'"></slot></div>
 
     <div :class="[showHover ? 'visibily' : 'hidden', 'hoverItem']">
-      <div class="item el-icon-rank" @click.stop.prevent="onMove">
+      <div
+        class="item el-icon-rank"
+        @click.stop.prevent
+        @mouseenter="setMoveState(true)"
+        @mouseleave="setMoveState(false)"
+      >
         <i-ep-rank />
       </div>
       <div v-if="showUp" class="item" @click.stop.prevent="onMoveUp">
@@ -62,6 +67,7 @@ const emit = defineEmits(['changeSeq', 'select'])
 const { getShowLogicText, hasShowLogic } = useShowLogicInfo(props.moduleConfig.field)
 
 const isHover = ref(false)
+const isMove = ref(false)
 
 const itemClass = computed(() => {
   return {
@@ -154,7 +160,9 @@ const onDelete = async () => {
   }
 }
 
-const onMove = () => {}
+const setMoveState = (state: boolean) => {
+  isMove.value = state
+}
 </script>
 
 <style lang="scss" scoped>