vue-draggable-resizable放大缩小拖拽功能

Vue.Draggable

SortableJS/Vue.Draggable: Vue.Draggable 是 Sortable.js 的 Vue.js 封装组件，提供了拖放排序功能，可以在 Vue 应用中轻松实现列表元素的可拖拽重排。

项目地址：https://gitcode.com/gh_mirrors/vu/Vue.Draggable

免费下载资源

tamia_nice

1409人浏览 · 2022-08-05 16:37:20

tamia_nice · 2022-08-05 16:37:20 发布

效果图
在这里插入图片描述

1.下载依赖

npm install --save vue-draggable-resizable

main.js引入

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

3.页面.vue文件中引入

  <div class="vue-draggable-resizable-div">
      <vue-draggable-resizable
        w="auto"
        h="auto"
        :grid="[20, 40]"
        :x="10"
        :y="10"
        :resizable="false"
      >
        <div
          class="tabledraggable-resizable"
          ref="table"
          @wheel.prevent="handleTableWheel($event)"
        >
          <div v-html="datahtml"></div>
        </div>
      </vue-draggable-resizable>
    </div>

export default {
  data() {
    return {
      datahtml: ` <h1>标题1</h1>
            <h2>标题2</h2>
            <h3>标题3</h3>
            <h4>标题4</h4>`,
            }
            }，
  methods: {
    handleTableWheel(event) {
      let obj = this.$refs.table;
      return this.tableZoom(obj, event);
    },
    tableZoom(obj, event) {
      // 一开始默认是100%
      let zoom = parseInt(obj.style.zoom, 10) || 100;
      // 滚轮滚一下wheelDelta的值增加或减少120
      zoom += event.wheelDelta / 12;
      if (zoom > 0) {
        obj.style.zoom = zoom + "%";
      }
      return false;
    }
    }

.vue-draggable-resizable-div {
  position: relative;
  margin: auto;
  width: 50%;
  height: 200px;
  background-color: orange;
  overflow-y: auto;
}
.draggable {
  position: relative;
  margin: auto;
  width: 50%;
  background-color: pink;
}