黑豹程序员-vue3获取拖动div后的坐标_vue div 移动的坐标

<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue'

let startclientX = ref(0) // 元素拖拽前距离浏览器的X轴位置
let startclientY = ref(0) //元素拖拽前距离浏览器的Y轴位置
let elLeft = ref(770) // 元素的左偏移量
let elTop = ref(220) // 元素的右偏移量
let elWidth = ref(200)
let elHeight = ref(100)


// 拖拽开始事件
function dragstart(e) {
  startclientX.value = e.clientX; // 记录拖拽元素初始位置
  startclientY.value = e.clientY;
}
// 拖拽完成事件
function dragend(e) {
  let x = e.clientX - startclientX.value; // 计算偏移量
  let y = e.clientY - startclientY.value;
  elLeft.value += x; // 实现拖拽元素随偏移量移动
  elTop.value += y;

  //记录拖放后的位置
  console.log(elLeft.value+", "+elTop.value+", " +elWidth.value+", "+elHeight.value)
}

</script>
<template>
  <div
      class="drag_box"
      draggable="true"
      @dragstart="dragstart($event)"
      @dragend="dragend($event)"
      :style="`left:${elLeft}px;top:${elTop}px;width:${elWidth}px;height:${elHeight}px;`"
  >
    拖放案例
  </div>
</template>
<style scoped>

.drag_box {
  background: skyblue;
  position: absolute;
  z-index: 10;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47