vue拖拽元素

实现目的

微信图片_20191014185920.png

代码

实现鼠标按住title可以拖拽set模块。

<template>

    <div class="set" ref="set">
        <div class="title" @mousedown="onmousedown">
            <p class="titleName">系统设置</p>
            <p class="titleClose">X</p>
        </div>
        <div class="main">
            <div class="tab">
                <div class="tabItem" :class="i === defaultIndex ? 'active':''" v-for="(value,i) in tabs" :key="i"
                     @click="tabClick(i)"> {{value}}
                </div>
            </div>
            <div class="tabContent"></div>
        </div>
    </div>

</template>

<script>
    import Drag from "../plugins/drag"
    export default {
        name: "Set",
        data() {
            return {
                tabs: ['岗亭设置', '其他设置'],
                defaultIndex: 0,
                //    鼠标状态
                mounseStatus: false,
            }
        },
        methods: {
            tabClick(e) {
                console.log(e)
                this.defaultIndex = e;

            },
            onmousedown(e){
                Drag.drag(e,this.$refs.set)
            }
        }
    }
</script>

<style scoped>
    .set {
        display: flex;
        height: 50%;
        width: 60%;
        flex-direction: column;
        position: absolute;
    }

    .title {
        display: flex;
        height: 50px;
        width: 100%;
        background: #031438;
        justify-content: space-between;
        padding-left: 20px;
        align-items: center;
    }

    .titleName {
        color: #13b8fa;
    }

    .titleClose {
        color: #fff;
        padding: 10px 15px;
        cursor: pointer;
        transition: color .2s linear;
    }

    .titleClose:hover {
        color: rgba(255, 255, 255, .8);
    }

    .main {
        display: flex;
        flex: 1;
        background: #fff;
        flex-direction: column;
    }

    .tab {
        display: flex;
        height: 50px;
        background: #eeeeee;
    }

    .tabItem {
        display: flex;
        width: 150px;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #666;
    }

    .active {
        background: #fff;
        font-size: 16px;
    }

</style>

drag.js

参数e是鼠标点击event，参数a是需要拖拽的元素。

export default {
    drag(e,a) {

        //算出鼠标的位置
        let mounseX = e.clientX
        let mounseY = e.clientY
        //算出元素的位置
        let divX = a.offsetLeft
        let divY = a.offsetTop

        document.onmousemove = (e) => {

            //用鼠标移动后的位置减去鼠标的位置，得到鼠标移动的距离
            let left = e.clientX - mounseX;
            let top = e.clientY - mounseY;

            //移动当前元素
            a.style.left = divX + left + 'px';
            a.style.top = divY + top + 'px';
        };
        document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
        };

    }
}