no message
This commit is contained in:
A1300399510
parent
00e3c5302b
commit
dd82fab6f7
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
158
html/index.html
158
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>
|
||||
<img class="drag-icon" src="/img/drag-icon.png" />
|
||||
<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" @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`)
|
||||
textarea.style.height = "auto"
|
||||
textarea.style.height = textarea.scrollHeight + "px"
|
||||
// const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
|
||||
const textarea = manageListRef.value.querySelector(`.item[data-index="${index}"] textarea`)
|
||||
|
||||
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(obj)
|
||||
calculateWaterfall()
|
||||
}
|
||||
|
||||
const calculateWaterfall = obj => {
|
||||
let list = manageList.value || []
|
||||
const calculateWaterfall = () => {
|
||||
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
|
||||
}
|
||||
|
||||
element["top"] = top + "px"
|
||||
element["left"] = left + "px"
|
||||
if (!element.load) {
|
||||
element["top"] = top
|
||||
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`)
|
||||
textarea.style.height = "auto"
|
||||
textarea.style.height = textarea.scrollHeight + "px"
|
||||
const textarea = manageListRef.value.querySelector(`.item[data-index="${index}"] textarea`)
|
||||
manageList.value[index]["inputHeight"] = 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,
|
||||
dragEnter,
|
||||
dragEnd,
|
||||
draggedIndex,
|
||||
draggableIndex,
|
||||
startDrag,
|
||||
dragging,
|
||||
endDrag,
|
||||
isDragging,
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user