七、前端-vue3 使用 interactjs 实现空间拖拽缩放功能

someking

已于 2024-09-22 15:03:34 修改

阅读量632

点赞数 2

分类专栏：前端文章标签：前端 javascript 开发语言

于 2024-09-22 13:58:57 首次发布

本文链接：https://blog.csdn.net/someking/article/details/142435957

版权

1、创建一个组件SeatingChart.vue

实现的是一个座位表，导入一张公司目前座位图，我是直接限定了这个组件的宽高和图片大小一样这个组件库的功能很强，我们业务需求只需要拖拽和缩放所以目前就实现了这两种功能，有兴趣的可以去官网看看

<template>
  <div class="box">
    <template v-for="(item, index) in seatlists" :key="index">
        <SeatList :item="item"/>
    </template>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import mdyeapi from '@/API/mdye'
import SeatList from '@/components/SeatList.vue'

const params = ref({
  size: 50,
  index: 1
})

const seatlists = ref([])

const getseatlists = async () => {
  const result = await mdyeapi.getseat(params)
  console.log(result.data.rows)
  seatlists.value = result.data.rows
}
onMounted(() => {
  getseatlists()
})
</script>

<style scoped>
.box{
  background-image: url(@/assets/座位表.png);
  background-size:cover;
  width: 1332px;
  height: 1964px;
}
</style>

2、创建SeatList.vue 在这个组件实现拖拽缩放效果，注释都会写的非常详细

实现功能：

1、拖动盒子到达顶部或者底部的时候，滚动条会自动滚动

2、两个盒子发生碰撞的时候，会在碰撞的边显示一个虚线

3、两个盒子碰撞的时候，会限制往碰撞方向移动，比如在我拖拽一个盒子左移的时候碰到了一个盒子，这个盒子就不能继续左移了，只可以往右和Y轴的移动，其他三个方向同理

4、还实现了缩放功能，可以限制最小和最大缩放

<template>
  <div
    @mousedown="startDrag"
    id="draggable"
    class="draggable"
    ref="draggableElement"
    :style="{
      transform: `translate(${position.x}px, ${position.y}px)`,
      width: boxStyle.boxwidth + 'px',
      height: boxStyle.boxheight + 'px',
    }"
  >
    {
  { boxStyle.name }}<br />
    {
  { boxStyle.work }}<br />
    {
  { boxStyle.number }}
  </div>
  <!-- 虚线 -->
  <div v-if="showGuideLine" class="guide-line" :style="guideLineStyle"></div>
  <!-- 抽屉弹出框 -->
  <!-- <el-button @click="centerDialogVisible=true">switch</el-button> -->
  <el-dialog v-model="centerDialogVisible" title="座位表" width="90%">
    <h1 style="margin: 50px">
      {
  { "座位" + boxStyle.number + "-" + boxStyle.name }}
    </h1>
    <!-- 展示的员工