no message

css/common.css

@@ -573,6 +573,14 @@ body {
   margin-bottom: 20px;
   position: absolute;
   transition: all 0.3s;
+  user-select: none;
+}
+.my-project .my-box .manage-box .list .item.load {
+  transition: auto;
+  z-index: 1000;
+}
+.my-project .my-box .manage-box .list .item:active {
+  opacity: 1;
 }
 .my-project .my-box .manage-box .list .item .top {
   padding: 16px 10px 14px;
@@ -706,11 +714,14 @@ body {
   background-color: transparent;
   resize: none;
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  height: 34px;
 }
 .my-project .my-box .manage-box .list .item .bottom .drag-icon {
   width: 16px;
   height: 16px;
   margin-top: 6px;
+  cursor: pointer;
+  -webkit-user-drag: none;
 }
 .empty-box {
   flex-direction: column;

css/common.less

@@ -647,7 +647,17 @@ body {
                     border-radius: 12px;
                     margin-bottom: 20px;
                     position: absolute;
-                    transition: all .3s;
+                    transition: all 0.3s;
+                    user-select: none;
+
+                    &.load {
+                        transition: auto;
+                        z-index: 1000;
+                    }
+
+                    &:active {
+                        opacity: 1;
+                    }
 
                     .top {
                         padding: 16px 10px 14px;
@@ -795,12 +805,15 @@ body {
                             background-color: transparent;
                             resize: none;
                             font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                            height: 34px;
                         }
 
                         .drag-icon {
                             width: 16px;
                             height: 16px;
                             margin-top: 6px;
+                            cursor: pointer;
+                            -webkit-user-drag: none;
                         }
                     }
                 }

html/index.html

@@ -307,10 +307,11 @@
                             </div>
                             <div class="list-box flexflex" ref="manageListRef">
                                 <template v-for="(item,index) in manageList">
-                                    <div class="item" v-if="item.ismanage == 1" :class="'item' + index" :data-index="index" :style="{'top':item.top,'left': item.left}" :draggable="draggableIndex(index)" @dragstart="dragStart(index)" @dragenter.prevent="dragEnter(index)" @dragend="dragEnd">
+                                    <!-- <div class="item" v-if="item.ismanage == 1" :class="'item' + index" :data-index="index" :style="{'top':item.top,'left': item.left,}"  @dragstart="dragStart(index)" @dragenter.prevent="dragEnter(index)" @dragend="dragEnd"> -->
+                                    <div class="item" v-if="item.ismanage == 1" :class="{'load': item.load}" :data-index="index" :style="{'top':item.top + 'px','left': item.left + 'px' }" @mousemove="dragging(index)" @mouseup="endDrag">
                                         <div class="top flexacenter">
                                             <div class="info flex1">
-                                                <div class="name">{{ item.name_zh }}</div>
+                                                <div class="name">{{ item.name_zh }}{{item.top}},{{ item.left}}</div>
                                                 <div class="english">{{ item.name_en }}</div>
                                                 <div class="school flexacenter">
                                                     <img class="icon" :src="item.schoollogo" />
@@ -335,8 +336,8 @@
                                             <div class="edit flexcenter">
                                                 <img class="icon" src="/img/u1434.png" />
                                             </div>
-                                            <textarea class="input flex1" v-model="item.remarks" placeholder="添加备注…" maxlength="100" @blur="inputblur(index)" @input="inputInput(index)"></textarea>
+                                            <textarea class="input flex1" :style="{height: item.inputHeight}" v-model="item.remarks" placeholder="添加备注…" maxlength="100" @blur="inputblur(index)" @input="inputInput(index)"></textarea>
-                                            <img class="drag-icon" src="/img/drag-icon.png" />
+                                            <img class="drag-icon" src="/img/drag-icon.png" @mousedown="startDrag(index)" />
                                         </div>
                                     </div>
                                 </template>
@@ -347,9 +348,11 @@
             </div>
         </div>
         <script>
-            const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
+            const { createApp, ref, onMounted, nextTick, onUnmounted, computed, getCurrentInstance } = Vue
             const projectIndex = createApp({
                 setup() {
+                    const { proxy } = getCurrentInstance()
+
                     let dataListRef = ref(null)
 
                     onMounted(() => {
@@ -380,7 +383,6 @@
                             getFate()
                             getAdmission()
                             getProjectData()
-
                             getMyInit()
                         })
                     }
@@ -653,9 +655,10 @@
                         nextTick(() => {
                             manageList.value.forEach((element, index) => {
                                 if (element.ismanage == 1 && element.remarks) {
-                                    const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
+                                    // const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
-                                    textarea.style.height = "auto"
+                                    const textarea = manageListRef.value.querySelector(`.item[data-index="${index}"] textarea`)
-                                    textarea.style.height = textarea.scrollHeight + "px"
+
+                                    element["inputHeight"] = textarea.scrollHeight + "px"
                                 }
                             })
 
@@ -667,21 +670,25 @@
 
                     const getAllHeight = () => {
                         const all = manageListRef.value.querySelectorAll(".item") || []
-                        let obj = {}
                         all.forEach(element => {
-                            obj[element.getAttribute("data-index")] = element.offsetHeight + 20
+                            const index = element.getAttribute("data-index") * 1
+                            manageList.value[index]["height"] = element.offsetHeight + 20
                         })
-
+                        calculateWaterfall()
-                        calculateWaterfall(obj)
                     }
 
-                    const calculateWaterfall = obj => {
+                    const calculateWaterfall = () => {
-                        let list = manageList.value || []
+                        let list = JSON.parse(JSON.stringify(manageList.value)) || []
+                        list.sort((a, b) => a.sortKey - b.sortKey)
+
                         let topLeft = 0
                         let topRigth = 0
-                        list.forEach((element, index) => {
+
+                        for (let i = 0; i < list.length; i++) {
+                            const element = list[i]
+
                             if (element.ismanage == 1) {
-                                const height = obj[index]
+                                const height = element.height
                                 let top = 0
                                 let side = topLeft <= topRigth ? "left" : "right"
                                 let left = 0
@@ -693,47 +700,16 @@
                                     topRigth += height
                                     left = 440
                                 }
-
+                                if (!element.load) {
-                                element["top"] = top + "px"
+                                    element["top"] = top
-                                element["left"] = left + "px"
+                                    element["left"] = left
+                                }
                                 element["height"] = height
                             }
-                        })
+                        }
+
                         manageList.value = list
                     }
-                    let draggedIndex = ref(null)
-
-                    const dragStart = index => {
-                        draggedIndex.value = index
-                    }
-
-                    let timer = null
-                    const dragEnter = index => {
-                        // console.log("dragEnter", e, index)
-                        console.log(Date.now() )
-                        if (Date.now() - timer < 200) return
-                        if (index == draggedIndex.value) return
-                        timer = Date.now()
-                        let list = JSON.parse(JSON.stringify(manageList.value))
-                        const targetItem = list[draggedIndex.value]
-                        // console.log("targetItem", targetItem)
-                        const item = list[index]
-                        list[index] = targetItem
-                        list[draggedIndex.value] = item
-                        manageList.value = list
-
-                        getAllHeight()
-                    }
-
-                    const dragEnd = () => {
-                        draggedIndex.value = null
-                    }
-
-                    const draggableIndex = index => {
-                        if (draggedIndex.value === null) return true
-                        else if (draggedIndex.value >= 0 && draggedIndex.value === index) return true
-                        else return false
-                    }
 
                     const manageEmpty = computed(() => {
                         return typeList.value[typeIndex.value]["count"] == 0
@@ -830,9 +806,8 @@
                     const manageListRef = ref(null)
 
                     const inputInput = index => {
-                        const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
+                        const textarea = manageListRef.value.querySelector(`.item[data-index="${index}"] textarea`)
-                        textarea.style.height = "auto"
+                        manageList.value[index]["inputHeight"] = textarea.scrollHeight + "px"
-                        textarea.style.height = textarea.scrollHeight + "px"
                     }
 
                     const inputblur = index => {
@@ -894,6 +869,65 @@
                         })
                     }
 
+                    let isDragging = ref(null)
+                    const startDrag = index => {
+                        isDragging.value = index
+                        const target = manageList.value[index]
+
+                        manageList.value[index]["load"] = true
+                    }
+
+                    let timer = null
+
+                    const dragging = index => {
+                        if (isDragging.value != index) return
+                        manageList.value[index]["left"] += event.movementX
+                        manageList.value[index]["top"] += event.movementY
+
+                        const list = JSON.parse(JSON.stringify(manageList.value))
+                        let maxOverlapArea = 0
+                        let maxOverlapElement = null
+
+                        const target = list[index]
+
+                        for (let i = 0; i < list.length; i++) {
+                            const element = list[i]
+                            if (index !== i) {
+                                const overlapArea = Math.max(0, Math.min(target.left + 420, element.left + 420) - Math.max(target.left, element.left)) * Math.max(0, Math.min(target.top + target.height, element.top + element.height) - Math.max(target.top, element.top))
+
+                                // 计算重叠面积是否超过另一个元素的一半面积
+                                const halfArea = (420 * element.height) / 2
+                                if (overlapArea > halfArea && overlapArea > maxOverlapArea) {
+                                    maxOverlapArea = overlapArea
+                                    maxOverlapElement = i
+                                }
+                            }
+                        }
+
+                        if (maxOverlapElement != null) {
+                            const over1 = JSON.parse(JSON.stringify(list[maxOverlapElement]))
+                            const over2 = JSON.parse(JSON.stringify(list[isDragging.value]))
+                           
+                            list[maxOverlapElement]["sortKey"] = over2.sortKey
+                            list[isDragging.value]["sortKey"] = over1.sortKey
+                            manageList.value = list
+                            calculateWaterfall()
+                            isDragging.value = maxOverlapElement
+                        }
+                    }
+
+                    const endDrag = () => {
+                        if (isDragging.value == null) return
+
+                        isDragging.value = null
+
+                        manageList.value.forEach(element => {
+                            element["load"] = false
+                        })
+
+                        calculateWaterfall()
+                    }
+
                     return {
                         user,
                         university,
@@ -942,11 +976,11 @@
                         cutTypeid,
                         cutManageStateShow,
                         cutManageState,
-                        dragStart,
+                        startDrag,
-                        dragEnter,
+                        dragging,
-                        dragEnd,
+                        endDrag,
-                        draggedIndex,
+                        isDragging,
-                        draggableIndex,
+
                     }
                 },
             })