vue鼠标拖动 

<!DOCTYPE html>
<html>

<head>
    <title> </title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<style>
    #app {
        position: relative;
        /*定位*/
        top: 10px;
        left: 10px;
        width: 200px;
        height: 200px;
        background: #666;
        /*设置一下背景*/
    }
</style>

<body>
    <div id="app" @mousedown="move">
        <!--绑定按下事件-->
        {{positionX}} {{positionY}}
    </div>
</body>
<script type="text/javascript">
    let app = new Vue({
        el: '#app',
        data: {
            positionX: 0,
            positionY: 0,
        },
        methods: {
            move(e) {
                let odiv = e.target; //获取目标元素

                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft + 18;
                let disY = e.clientY - odiv.offsetTop + 18;
                document.onmousemove = (e) => { //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    let left = e.clientX - disX;
                    let top = e.clientY - disY;

                    //绑定元素位置到positionX和positionY上面
                    this.positionX = top;
                    this.positionY = left;

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

        },
        computed: {},
    });
</script>

</html>

 

posted @ 2021-09-23 11:38  不经一番寒彻骨  阅读(585)  评论(0)    收藏  举报