拖拽插件的使用（vue-draggable-resizable）

拖拽功能 使用插件（vue-draggable-resizable）

用于可拖动和可调整大小元素的 Vue2 组件。

1.使用

- 安装插件依赖

npm install --save vue-draggable-resizable

- 在项目中引用

import VueDraggableResizable from "vue-draggable-resizable";
export default {
  components: {
    VueDraggableResizable,
  	}
  }

- 在项目中直接使用即可

<VueDraggableResizable></VueDraggableResizable>

2.参数使用

• 1类名

< VueDraggableResizable class="我的类" >

• 2禁用用户选择文字

< VueDraggableResizable :disable-user-select ="false">

• 3可拖动的

< VueDraggableResizable  :draggable ="false" >

• 4可调整大小

< VueDraggableResizable :resizable =" false ">

• 5宽高

< VueDraggableResizable  :w =" 200 " :h =" 200 ">

• 6 x y初始位置

< VueDraggableResizable :x =" 0 " :y =" 0 " >

事件

• 1 .组件被拖动时调用。left元素的 X 位置，top元素的 Y 位置

< VueDraggableResizable @dragging =" onDragging ">

• 2.每当组件停止被拖动时调用。

< VueDraggableResizable  @dragstop =" onDragstop ">

完整使用(完整代码)

//vue页面
<template>
  <div class="box" ref="box">
    <VueDraggableResizable
      :w="w"
      :h="h"
      :x="item.x"
      :y="item.y"
      :parent="true"
      class="drag"
      :resizable="true"
      :onDragStart="() => dragStart(item.id)"
      @dragstop="onDragStop"
      @dragging="onDragging"
      @resizing="onResizing"
      v-for="item in showComponent"
      :key="item.id"
      :class="{ color: item.color }"
    >
      <div class="dragbox">
        {{ item.name }}<br />
        X：{{ item.x }} / Y：{{ item.y }} - 宽度：{{ w }} / 高度：{{ h }}
      </div>
    </VueDraggableResizable>
  </div>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";
export default {
  data() {
    return {
      w: 400,
      h: 100,
      draggingId: 0,
      showComponent: [
        { id: 1, show: false, name: "aa", y: 200, x: 100 },
        { id: 2, show: false, name: "nn", y: 400, x: 100 },
      ],
    };
  },
  components: {
    VueDraggableResizable,
  },
  mounted() {},
  methods: {
    dragStart(id) {
      this.draggingId = id;
    },
    onDragStop(x, y) {
      const item = this.showComponent.find((i) => i.id === this.draggingId);
      item.x = x;
      item.y = y;
    },
    onDragging(x, y) {
      const item = this.showComponent.find((i) => i.id === this.draggingId);
      item.x = x;
      item.y = y;
    },
    onResizing(ax, ay, aw, ah) {
      console.log(ax, ay, aw, ah);
    },
    drag(params) {
      console.log(params);
    },
  },
};
</script>

<style scoped>
.box {
  width: 800px;
  position: relative;
  height: 100vh;
  border: 1px solid #000;
}
.drag {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background-color: blue;
  display: flex;
}
</style>