Vue实现自由拖拽

最新推荐文章于 2024-05-15 17:05:01 发布

鲸是鲸鱼的鲸

最新推荐文章于 2024-05-15 17:05:01 发布

阅读量7k

点赞数

文章标签：拖拽

本文链接：https://blog.csdn.net/weixin_44195250/article/details/97392273

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖拽</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            background: red;
            width: 100px;
            height: 100px;
            position: absolute;
 
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div id="box" v-drag.l.t="flag"></div>
    </div>
    <script>
        Vue.directive("drag",(el,{modifiers,value})=>{
            let{l,t}=modifiers;
 
 
            el.addEventListener("mousedown",handleDownCb)
 
            let disX,disY;
            function handleDownCb(e){
                disX=e.offsetX;
                disY=e.offsetY;
                // console.log(disX,disY)
                document.addEventListener("mousemove",handleMoveCb);
                document.addEventListener("mouseup",handleUpCb);
            }
 
            function handleMoveCb(e){
                let x=e.clientX-disX;
                let y=e.clientY-disY;
                if((l&&t) && value){
                    el.style.left=x+"px";                    
                    el.style.top=y+"px";
                    return;
                }
 
                if(l&&value){
                    el.style.left=x+"px";                    
                    return;
                }
                if(t&&value){
                    el.style.top=y+"px";
                    return;
                }
            }
 
            function handleUpCb(){
                document.removeEventListener("mousemove",handleMoveCb);
                document.removeEventListener("mouseup",handleUpCb);
            }
 
        })
        let vm=new Vue({
            el:"#app",
            data:{
                flag:true
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background:black;
            position: absolute;
            border-radius: 50%;
          
            background-size:contain
        }
        button{margin-left: 200px}
    </style>
</head>
<body>
    <div id="app">
        <button @click="dragx()" >X轴动</button>  
        <button @click="dragy()">Y轴动</button> 
        <button @click="dragxy()">XY轴动</button>
        <div class="box" v-drag="show"></div>

    </div>
    
</body>
</html>
<script src="vue.js"></script>
<script>
// 创建 自定义指令drag  el为操作的区间  modifiers修饰符 value为show的属性flase或ture
    Vue.directive("drag",(el,{modifiers,value})=>{
    //   鼠标按下时 e为鼠标数据
        el.onmousedown = function(e){
    //  disx相对于盒子的x坐标 disY相对于盒子的y左边
            var disx = e.offsetX;
            var disy = e.offsetY;
    // 鼠标滑动时
            document.onmousemove = function(e){
    //  x等于相对body x轴位置减去相对于盒子位置
    //  y等于相对body y轴位置减去相对于盒子位置
    //  意为盒子相对于body的xy位置
                var x = e.clientX - disx;
                var y = e.clientY - disy;
    //  如果show属性不是ture是 不动（没鸡毛用） 
                if(!value){
                    return;
                }
    //  如果指令是x 就x轴可以动        
                if(value==3){
                    el.style.left = x + "px";
                }
    //  如果指令是y 就y轴可以动    
                if(value==2){
                    el.style.top = y + "px";
                }
    //  如果指令不是x不是y都能动   
                if(value==1){
                    el.style.left = x + "px";
                    el.style.top = y + "px";
                }
            }
    //鼠标离开时都为空 
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    })
   
    var vm = new Vue({
        el:"#app",
        data:{
            show:false
        },
        methods:{
            dragxy(){
            this.show=1
            },
            dragy(){
            this.show=2
            },
            dragx(){
            this.show=3
            }
        }
    })
</script>

鲸是鲸鱼的鲸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实现自由拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫