vue拖拽练习

最新推荐文章于 2025-04-02 22:06:05 发布

kiki_Aurora

最新推荐文章于 2025-04-02 22:06:05 发布

阅读量849

点赞数

分类专栏： vue练习文章标签：拖拽鼠标点击坐标自定义指令简拖拽案例

本文链接：https://blog.youkuaiyun.com/qq_39108050/article/details/73309137

版权

vue练习专栏收录该内容

1 篇文章

订阅专栏

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue_2.js"></script>
</head>
<body>
    <div id="box">
    <-- 自定义指令 v-drag -->
        <div v-drag :style="{position:'absolute',
        width:'100px',
        height:'100px',
        background:'red'}"></div>

        <div v-drag :style="{position:'absolute',
        width:'100px',
        height:'100px',
        background:'blue'}"></div>
    </div>
</body>
</html>

<script type="text/javascript">
    // 自定义元素指令
    Vue.directive('drag',function(){
        var box = this.el;
        box.onmousedown = function(ev){
            var disX = ev.clientX - box.offsetLeft;
            var disY = ev.clientY - box.offsetTop;

            document.onmousemove = function(ev){
                var l = ev.clientX - disX;
                var t = ev.clientY - disY;
                box.style.left = l + "px";
                box.style.top = t + "px";
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    });
    new Vue({

    }).$mount("#box");
</script>