基于Vue实现拖拽效果

thursday 发布于2019-08-29 15:09 / 2862人阅读

摘要：是浏览器的特有属性实现拖拽功能我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。当然我们同时也学习了的一些方法，例如自定义指令等。

效果图

分清clientY pageY screenY layerY offsetY的区别

在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果

clientY 指的是距离可视页面左上角的距离

pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)

screenY 指的是距离屏幕左上角的距离

layerY 指的是找到它或它父级元素中最近具有定位的左上角距离

offsetY 指的是距离它自己左上角的距离

一张图带大家简单了解了解

在我们简单了解完这些个属性以后，有几个属性需要分清。

	相同点	不同点
clientY	距离页面左上角距离	受页面滚动的影响
pageY	距离页面左上角的距离	不受页面滚动影响

	相同点	不同点
layerY	距离元素的左上角距离	受元素的定位的影响，会从本元素往上找到第一个定位的元素的左上角
offsetY	距离元素左上角的距离	计算相对于本元素的左上角，不在乎定位问题，计算的是内交点。是IE浏览器的特有属性

实现拖拽功能

我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。话不多说直接上代码

// darg.html



           
        {{positionX}}
        {{positionY}}

//main.js
let 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;
            };
        }    
    
    },
    computed:{},
});

当然，我们可以将它绑定为一个自定义指令，这样的话就可以用调用指令的形式来实现拖拽效果，下面是定义自定义指令的代码

// darg.html

//main.js

let 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;
                    };
                };
            }
        }
    }
});

最后

到这里我们就已经把拖拽效果用Vue实现了，我们用了两种不同的方式实现了拖拽，但实际上换汤不换药，我们需要弄清楚pageY、screenY、clientY、layerY、offsetY等区别。当然我们同时也学习了Vue的一些方法，例如自定义指令等。

成功不在一朝一夕间，我们都需要努力

原创文章，转载需联系

超融合服务器 idc机房托管 jQuery拖拽效果 js拖拽效果实现拖拽 js实现数据拖拽

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113138.html

基于Vue实现拖拽效果

摘要：是浏览器的特有属性实现拖拽功能我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。当然我们同时也学习了的一些方法，例如自定义指令等。效果图 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

韩冰 2019-08-22 16:40 评论0 收藏0
基于Vue实现拖拽效果

摘要：是浏览器的特有属性实现拖拽功能我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。当然我们同时也学习了的一些方法，例如自定义指令等。效果图 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

zhoutao 2019-08-05 13:39 评论0 收藏0
基于Vue实现拖拽效果

摘要：是浏览器的特有属性实现拖拽功能我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。当然我们同时也学习了的一些方法，例如自定义指令等。效果图 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

王岩威 2019-08-02 10:17 评论0 收藏0
基于Vue实现拖拽升级（九宫格拖拽）

摘要：前言在本文中将会用完成九宫格拖拽效果，同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家珍惜淡定的心境，苦过后更加清前言在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入传送门：Demo以及完整代码连接效果实例 showImg(https://segmentfault.com/im...

RyanQ 2019-08-29 15:13 评论0 收藏0
基于Vue实现拖拽升级（九宫格拖拽）

摘要：前言在本文中将会用完成九宫格拖拽效果，同时介绍一下网格布局。到这里我们就把基于的九宫格拖拽实现了，有问题或者发现错误的请指正，谢谢大家珍惜淡定的心境，苦过后更加清前言在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入传送门：Demo以及完整代码连接效果实例 showImg(https://segmentfault.com/im...

Jioby 2019-08-26 11:51 评论0 收藏0