vue 拖拽移动示例

本文主要是介绍vue 拖拽移动示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<template>
  <div id="drag">
    <div
      id="drag-box"
      class="drag-box"
      draggable="true"
      :style="{ top, left }"
      @dragstart.stop="onDragstart"
      @drag.stop="onDragenter"
      @dragend.stop="onDragend"
    />
  </div>
</template>

setup部分

<script setup>
import { ref } from 'vue'
const top = ref(0)
const left = ref(0)
const obj = { top: 0, left: 0 }
let disx = 0
let disy = 0

const onDragstart = (e) => {
  const box = document.getElementById('drag-box')
  disx = e.pageX - box.offsetLeft
  disy = e.pageY - box.offsetTop
}
const onDragenter = (e) => {
  let x, y
  const drag = document.getElementById('drag')
  if ((e.pageX - disx) > 0) { // 元素相对于页面左上角的偏移位置 大于0时
    if ((e.pageX - disx) > drag.clientWidth - 200) { // 元素相对于页面左上角的偏移位置 移出到页面以外（右侧）
      x = drag.clientWidth - 200 // 60是元素自身的宽高
    } else {
      x = e.pageX - disx
    }
  }
  if ((e.pageY - disy) > 0) {
    if ((e.pageY - disy) > drag.clientHeight - 200) { // 元素移动到页面以外（底部）
      y = drag.clientHeight - 200
    } else {
      y = e.pageY - disy
    }
  }
  left.value = x + 'px'
  top.value = y + 'px'
}
const onDragend = (e) => {
  console.log(obj)
}
</script>

css

<style lang="less">
#drag {
  width: 800px;
  height: 800px;
  background-color: #666;
  position: relative;
  .drag-box {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #f1f1f1;
    cursor: grab;
  }
}
</style>

这篇关于vue 拖拽移动示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！