Vue中实现div的任意移动

前言

在系统应用中，像图片，流程预览及打印预览等情况，当前视窗无法全部显示要预览的全部内容，设置左右和上下滚动条后，如果用鼠标拖动滚动条，又不太便利，如何用鼠标随意的移动呢？

核心方法及事件

可以借助mousedown，mouseup，mousemove三个事件来处理内容的移动与起始、结束的控制，再借助getComputedStyle动态设置移动内容的left,top，以实现区域的随意移动。

简单代码示例

template>
  div>
    div style="display: flex; justify-content: center">
      div class="main">
        
      /div>
    /div>
  /div>
/template>
script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
onMounted(() => {
  服务器托管网moveNode()
})
function moveNode() {
  const child = document.querySelector('.main')
  let isDragging = false
  let prevX = 0
  let prevY = 0
  child.addEventListener('mousedown', function (e) {
    isDragging = true
    prevX = e.clientX
    prevY = e.clientY
  })
  child.addEventListener('mouseup', function () {
    isDragging = false
  })
  child.addEventListener('mousemove', function (e) {
    if (isDragging) {
      const diffX = e.clientX - prevX
      const left = parseInt(window.getComputedStyle(child).left) || 0
      child.style.left = `${left + diffX}px`
      prevX = e.clientX
      const diffY = e.clientY - prevY
      const top = parseInt(window.getComputedStyle(child).top) || 0
      child.style.top = `${top + diffY}px`
      prevY = e.clientY
    }
  })
}
/script>
style lang="less" scoped>
.main {
  position: re服务器托管网lative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 500px;
  width: 500px;
  background-color: red;
  cursor: move;
}
/style>

动态演示

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 权限管理之多租户隔离授权

想要做好权限管理，并不是一件容易的事情，既要考虑授权的粒度保证安全，也要考虑授权的方式足够便捷。之前有篇文章权限管理系统设计介绍过我们的权限设计，整体上是采用RBAC+资源隔离的方式，仅对小部分非常敏感的数据再通过对象授权的方式做管控。在实际的使用中也验证了这…