标签：box 200 vue const 示例 disx disy drag 拖拽

<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>

标签：box,200,vue,const,示例,disx,disy,drag,拖拽
来源： https://www.cnblogs.com/dcyd/p/16543889.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。