vue拖拽辅助线+改变元素大小组件

机智的赵先生

已于 2022-04-13 09:25:21 修改

阅读量2.9k

点赞数 2

分类专栏： vue js 文章标签： javascript vue.js 前端

于 2022-04-11 15:59:44 首次发布

本文链接：https://blog.csdn.net/badmoonc/article/details/124101495

版权

js 同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

该博客介绍了如何将基于react-dragline的拖拽功能移植到Vue，提供了一个名为vue-dragline的库，支持元素拖拽、辅助线和大小调整。通过npm或yarn安装，全局引入并配置后，可以实现元素的拖放、大小改变等交互效果。示例代码展示了如何在模板中使用draggable-container和draggable-child组件，并监听相关事件。

摘要由CSDN通过智能技术生成

vue-dragline

项目根据react-dragline 改写为vue。
github地址：https://github.com/BadMooncc/vue-dragline
支持拖拽辅助线，改变元素大小，元素拖拽功能

演示

屏幕录制2022-04-12 17.56.37

Installation

npm

npm install vue-dragline --save

yarn

yarn add install vue-dragline

全局引入

在入口文件main.js，

import Vue from 'vue';
import drag from 'vue-dragline';
import 'vue-dragline/lib/vue-dragline.css';
Vue.use(drag);

Example

<template>
  <draggable-container>
    <draggable-child
      v-for="item in initialChildren"
      :key="item.id"
      :id="item.id"
      :width="item.width"
      :height="item.height"
      @stop="handleStop"
      @start="handleStart"
      @drag="handleDrag"
      @resize="handleResize"
      :default-position="item.position">
      <div
        class="item"
        :style="{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          cursor: 'move',
          boxSizing: 'border-box',
          background: item.background,
        }">
        <span>size: {{ item.size }}</span>
        <span>drag me</span>
      </div>
    </draggable-child>
  </draggable-container>
</template>
<script>
import 'vue-dragline/lib/vue-dragline.css';
export default {
    data() {
        return {
            initialChildren: [
                { id: 1, background: '#8ce8df', width: 100, height: 100, position: { x: 100, y: 10 } },
                { id: 2, background: '#8ce8df', width: 100, height: 100, position: { x: 400, y: 106 } },
                { id: 3, background: '#d2aff6', width: 100, height: 100, position: { x: 100, y: 316 } },
                { id: 4, background: '#fee493', width: 100, height: 100, position: { x: 480, y: 376 } },
            ]
        };
    },
    methods: {
        handleResize(e) {
            console.log(e, 'handleResize');
        },
        handleDrag(e) {
            console.log(e);
        },
        handleStop(e) {
            console.log(e, 'handleStop');
        },
        handleStart() {
            console.log('开始');
        },
        handleClick() {
            alert(1);
        }
    }
};
</script>