vue 多个div拖拽

最新推荐文章于 2024-05-31 09:28:08 发布

Jason–json

最新推荐文章于 2024-05-31 09:28:08 发布

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： vue javascript vue.js node.js html5

本文链接：https://blog.csdn.net/weixin_46146313/article/details/105666676

版权

vue 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
       *{
            margin: 0px;
            padding: 0px;
        }

        #app{
            position: relative;
            
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            position: absolute;
            top: 24px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:gray;
            position: absolute;
            top: 24px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--                  指令 绑定值，data中传-->
        <div class="box" v-drag="isDrag">div1</div> 
        <div class="box2" v-drag.linit="isDrag2" >div2</div> 
        <!--方法1 v-on事件 简写@ -->
        <!-- <button @click="clic">点击然后拖拽再点击停止</button> -->

        <!-- button和div需要一个共通的数据来控制div的移动 -->
        <button @click="isDrag = !isDrag">按钮1点击然后拖拽再点击停止</button>
        <button @click="isDrag2 = !isDrag2">按钮2点击然后拖拽再点击停止</button>
    </div>
    <script>
        // let butt = false;
        // 指定以全局指令
        Vue.directive("drag",{
            
            bind(el,{value,modifiers}){ //指令绑定到元素时就触发只执行一次 binding钩子函数里的第二个参数 
                console.log(el) //获取到了绑定的元素
                // console.log(value) 
                //这样就可以拿到从data传出来的数据，这里用value值  binding可以直接写成{value}
                // 这里虽然能找到但是为了数据互通，还是找一个指定的挂载点 把vaue的值传到el中 命名_value
                el._value = value
                console.log(modifiers)//当在指令后加 点 内容的时候 vue认为这就是一个修饰符
                // 然后把这个修饰符传到modifiers中 修饰符的值是true 那么我们就拿他来做一些、其他的功能
                
                el._isDrag = false //默认值是false
                el.addEventListener("mousedown",function(e){ 
                    if(!el._value) return // 如果是true 接着运行 如果是false结束  

                    el._isDrag = true; //按下是true
                    // console.log(e)//事件对象
                    console.log(el._isDrag)
                    // el._x 对象的语法规则 4e有的话直接获取，没有的话创建添加
                    el._x = e.clientX - el.offsetLeft; //鼠标的位置 - 元素位置
                    el._y = e.clientY - el.offsetTop;

                    e.preventDefault(); //阻止默认事件                    
                });
                document.addEventListener("mousemove",function(e){
                    if(el._isDrag){
                        // console.log(el._click)
                 
                        let new_x = e.clientX - el._x; //元素的新位置 = 鼠标的位置-鼠标距离元素的位置
                        let new_y = e.clientY - el._y;
                        console.log(modifiers.linit)
                        if(modifiers.linit){                         
                            if(new_x<0){
                                new_x = 0;
                            }
                            if(new_y<0){
                                new_y = 0
                            }
                            // console.log(window.innerHeight)
                            // console.log(el.offsetWidth)
                            let offW = window.innerWidth - el.offsetWidth
                            if(new_x > offW){
                                new_x = offW
                            }
                            let offH = window.innerHeight - el.offsetHeight
                            if(new_y > offH){
                                new_y = offH
                            }
                        }   
                        el.style.left = new_x + "px"; // 赋值
                        el.style.top = new_y + "px"; 
                    
                    }
                });
                document.addEventListener("mouseup",function(){
                    el._isDrag = false;
                    console.log("更新")
                });

            },
        
            componentUpdated(el,{value}){
                el._value = value; //
            }
        
        
        })
        let app = new Vue({
            el:"#app",
            data:{   //通过data可以达到数据互通
                isDrag:false,  //第一个div
                isDrag2:false  //第二个div的参数
            },
            // methods:{ //方法1的
            //     clic:function(){
            //         butt = !butt
            //     }
            // },
        })
    </script>

</body>
</html>

Jason–json

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 多个div拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
复制链接

扫一扫