基于Vue实现拖拽效果

参考地址：基于Vue实现拖拽效果

参考链接中讲的比较详细，我只使用了其中自定义指令的方法。整体代码如下：

<template>
    <!-- 卡片 -->
    <div class="card" v-drag id="card">

    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    directives: {
        drag: {
            // 指令的定义
            bind: function(el) {
                let oDiv = el;  // 获取当前元素
                oDiv.onmousedown = (e) => {
                    // 算出鼠标相对元素的位置
                    let disX = e.clientX - oDiv.offsetLeft;
                    let disY = e.clientY - oDiv.offsetTop;

                    document.onmousemove = (e) => {
                        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX;
                        let top = e.clientY - disY;

                        oDiv.style.left = left + 'px';
                        oDiv.style.top = top + 'px';
                    };

                    document.onmouseup = (e) => {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }
        }
    }
}
</script>

<style lang="scss">
    .card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 870px;
        height: 510px;
        background-color: #3ab5a0;
    }
</style>

 

转载于:https://www.cnblogs.com/carriezhao/p/11457841.html