vue实现可拖拽可缩放功能

安装vue-draggable-resizable插件 

npm install --save vue-draggable-resizable

全局注册组件main.js中写入：

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)

局部注册：在使用的组件里引用

src\views\Index.vue

<template>
    <div class="contentBox">
        <vue-draggable-resizable 
            class="drag"
            :min-width="200" 
            :min-height="200"
            :max-width="300"
            parent=".contentBox"
            class-name-active="my-active-class" 
            class-name="my-class" v-if="journal">
                <div class="journal" id="text">
                    <el-row type="flex" justify="space-between" class="m-b-5 m-t-5">
                        <el-col :span="12">
                            <h2 class="h2style" @click="scrollToBottom">日志</h2>
                        </el-col>
                        <el-col :span="12" class="titlebutton m-r-5">
                            <i class="el-icon-minus"></i>
                        </el-col>
                    </el-row>
                    <el-timeline>
                        <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        type="warning"
                        :timestamp="activity.timestamp">
                        {{activity.content}}
                        </el-timeline-item>
                    </el-timeline>
                </div>
        </vue-draggable-resizable>  
    </div>
</template>

<script>
// 局部注册：在使用的组件里引用
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

export default{
    name:"Index",
    components:{
        VueDraggableResizable
    },
    data () {
        return {
            journal:true,
            activities: [{
                content: '测试数据1',
                timestamp: '20:46:33'
            }, {
                content: '测试数据12',
                timestamp: '20:45:11'
            }, {
                content: '测试数据3',
                timestamp: '20:44:11'
            }, {
                content: '测试数据4',
                timestamp: '20:44:11'
            }, {
                content: '测试数据5',
                timestamp: '20:44:11'
            }],
        }
    },
    watch: {
        'processData': 'scrollToBottom'
    },
    scrollToBottom() {
        this.$nextTick(() => {
            var div = document.getElementById('text')
            div.scrollTop = div.scrollHeight
        })
    }, 
    mounted() {
        this.scrollToBottom()
    },
    updated:function(){
        this.scrollToBottom();
    },
    methods:{
        // 聊天定位到底部
        scrollToBottom () {
            this.$nextTick(() => {
                let ele = document.getElementById('text');
                console.log(ele,ele.scrollHeight)
                ele.scrollTop = ele.scrollHeight;
            })

        },       
    }
}
</script>

<style scpoed>
/* 主体 */
.content{
    display: flex;
    background-color:#f1f1f1;
    width:100%;
    height:calc(100% - 90px);
    top:90px;
    position:absolute;
}
.contentBox{
    width: calc(100% - 200px);
    overflow:auto;

}
.contentBox{
    position: relative;
}
.drag{
    padding-left: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.my-class {
    background-color:#fff;
    border: 1px dashed #e6a23c;
    border-radius: 5px;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}
.my-active-class {
    border: 1px dashed #4a4e56;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.handle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.handle-tl {
    top: -5px;
    left: -5px;
}
.handle-tr{
    top: -5px;
    right: -5px;
}
.handle-bl{
    bottom: -5px;
    left: -5px;
}
.handle-br{
    bottom: -5px;
    right: -5px;
}
.handle-ml{
    left: -5px;
}
.handle-mr{
    right: -5px;
}
.handle-tm{
    top: -5px;
}
.handle-bm{
    bottom: -5px;
}
.journal{
    overflow: auto;
    width: 100%;
    height: 100%;
}
</style>

好用的VUE拖拽调试方案

好用的VUE拖拽github方案

Vue-drag-resize 拖拽缩放插件的使用(简单示例)

vue-drag-resize 全解，vue拖拽缩放组件

vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结

vue-draggable-resizable定制化可拖动控件