14_test_自定义拖拽指令

作者: CHENPEIHUANG | 来源:发表于2018-02-08 16:13 被阅读0次

14_test_自定义拖拽指令
封装移动端 vue 拖拽指令
2021-01-26
vue 弹窗可拖拽
自定义拖拽指令
vue自定义指令-（拖拽指令）
el-dialog 在element-puls中添加dragga
2021-05-05
vue自定义指令之拖拽指令
vue自定义拖拽指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{background: red;height: 100px;width: 100px;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="box" v-drag.y="opts">1111</div>
        </div>
        
        <script src="js/vue.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            Vue.directive('drag',{
                bind(el,binding){
                    //定位
                    $(el).css("position","absolute");
                    //设置元素的鼠标按下事件
                    $(el).on("mousedown",function(ev){
                        //鼠标按下时的位置
                        var disX=0
                        var disY=0
                        //判断用户是否指定了偏移坐标
                        
                        //查看binding里的value值是否有指定offsetX
                        if(binding.value&&binding.value.offsetX){
                            disX=binding.value.offsetX
                        }else{
                            disX = ev.pageX-$(el).offset().left;
                        };
                        
                        //查看binding里的value值是否有指定offsetY
                        if(binding.value&&binding.value.offsetY){
                            disY=binding.value.offsetY
                        }else{
                            disY = ev.pageX-$(el).offset().top;
                        }
                        
                        //设置鼠标移动事件
                        $(document).on('mousemove',function(ev){
                            $(el).css({
                                left:ev.pageX - disX,
                                top:ev.pageY - disY
                            });
                        });
                        $(document).on('mouseup',function(ev){
                            $(document).off();
                        })
                    })
                }
            });
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"hello",
                    opts:{
                        offsetX:50,
                        offsetY:50
                    }
                }
            })
        </script>
    </body>
</html>