zoukankan      html  css  js  c++  java
  • vue中拖拽API的用法

    1、通过鼠标按下触发移动事件

    //简写如下
    <body>
        <div id="app" @mousedown="move">       <!--绑定按下事件-->
        </div>
    </body>
    var app = new Vue({
        el:'#app',
        data:{
            positionX:0,
            positionY:0,
        },
        methods:{
            move(e){
                let odiv = e.target;        //获取目标元素         
                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
                    let left = e.clientX - disX;    
                    let top = e.clientY - disY;               
                    //绑定元素位置到positionX和positionY上面
                    this.positionX = top;
                    this.positionY = left;                
                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                };
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }    
        },
    });
    

    2、通过自定义指令

    //简写如下:
    <body>
        <div id="app" v-drag>       <!--实现用指令形式实现拖拽效果-->       
        </div>
    </body>
    var app = new Vue({
        el:'#app',
        data:{},
        methods:{},
        directives: {
            drag: {
                // 指令的定义
                bind: function (el) {
                    let odiv = el;   //获取当前元素
                    odiv.onmousedown = (e) => {
                        //算出鼠标相对元素的位置
                        let disX = e.clientX - odiv.offsetLeft;
                        let disY = e.clientY - odiv.offsetTop;
                        document.onmousemove = (e)=>{
                            //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
                            let left = e.clientX - disX;    
                            let top = e.clientY - disY;
                            //绑定元素位置到positionX和positionY上面
                            this.positionX = top;
                            this.positionY = left;
                            //移动当前元素
                            odiv.style.left = left + 'px';
                            odiv.style.top = top + 'px';
                        };
                        document.onmouseup = (e) => {
                            document.onmousemove = null;
                            document.onmouseup = null;
                        };
                    };
                }
            }
        }
    });
    
  • 相关阅读:
    Hadoop与分布式开发
    Hadoop体系结构
    MapReduce基本流程与设计思想初步
    hadoop集群启动时DataNode节点启动失败
    初识Hadoop
    国家标准免费下载网站大全
    Effective C++ 之 Item 3:尽可能使用 const
    Effective C++ 之 Item 2:尽量以 const, enum, inline 替换 #define
    Effective C++ 之 Item 1: 视C++为一个语言联邦
    Effective C++ 之 0 导读(Introduction)
  • 原文地址:https://www.cnblogs.com/wangchangli/p/11386441.html
Copyright © 2011-2022 走看看