vue拖拽练习

最新推荐文章于 2024-06-19 15:39:02 发布

kiki_Aurora

最新推荐文章于 2024-06-19 15:39:02 发布

阅读量810

点赞数

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

本文链接：https://blog.csdn.net/qq_39108050/article/details/73309137

版权

vue练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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>

kiki_Aurora

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue拖拽练习

<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 :
复制链接

扫一扫

专栏目录