精华内容
下载资源
问答
  • Vue实现鼠标拖拽

    千次阅读 2020-06-22 09:23:15
    Vue实现鼠标拖拽 要实现拖拽,必须要使用三大秘法: (pc端) 1、鼠标按下事件:onmousedown 2、鼠标移动事件:onmousemove 3、鼠标抬起事件:onmouseup 移动端拖拽: 1、当在屏幕上按下手指时触发:touchstart ...

    Vue实现鼠标拖拽

    要实现拖拽,必须要使用三大秘法
    (pc端)

    1、鼠标按下事件:onmousedown
    
    2、鼠标移动事件:onmousemove
    
    3、鼠标抬起事件:onmouseup
    
    

    移动端拖拽:

    1、当在屏幕上按下手指时触发:touchstart
    
    2、当在屏幕上移动手指时触发:touchmove
    
    3、当在屏幕上抬起手指时触发:touchend
    
    4、touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发
    touchcancel。一般会在touchcancel时暂停游戏、存档等操作。
    
    

    实现鼠标拖动的原理:
    1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离
    2、计算出鼠标相对盒子的距离
    3、当鼠标移动的时候,获取鼠标移动的距离,在永鼠标此刻的位置减去鼠标相对盒子的距离,获得的是盒子此刻的坐标位置
    4、将这个位置赋值给盒子
    5、鼠标抬起,清除鼠标移动事件;

    代码:

    <template>
      <div class="home">
        <div id="box" v-drag></div>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    
    export default {
      name: "Home",
      data() {return {}},
      directives: {
        drag: {
          // 指令的定义
          inserted: function(el) {
            // el.drag();
            console.log(el);
            //获取元素
            // var dv = document.getElementById("dv");
            let x = 0;
            let y = 0;
            let l = 0;
            let t = 0;
            let isDown = false;
            //鼠标按下事件
            el.onmousedown = function(e) {
              //获取x坐标和y坐标
              x = e.clientX;
              y = e.clientY;
    
              //获取左部和顶部的偏移量
              l = el.offsetLeft;
              t = el.offsetTop;
              //开关打开
              isDown = true;
              //设置样式
              el.style.cursor = "move";
            };
            //鼠标移动
            window.onmousemove = function(e) {
              if (isDown == false) {
                return;
              }
              //获取x和y
              let nx = e.clientX;
              let ny = e.clientY;
              //计算移动后的左偏移量和顶部的偏移量
              let nl = nx - (x - l);
              let nt = ny - (y - t);
    
              el.style.left = nl + "px";
              el.style.top = nt + "px";
            };
            //鼠标抬起事件
            el.onmouseup = function() {
              //开关关闭
              isDown = false;
              el.style.cursor = "default";
            };
          }
        }
      }
    };
    </script>
    <style lang="scss" scoped>
    #box {
      width: 60px;
      height: 60px;
      background-color: darkorange;
      border-radius: 50%;
      position: absolute;
      //脱离文档流
    }
    </style>
    
    
    展开全文
  • } js部分 new Vue({ el: '#app', data: { //拖拽返回顶部 positionX:0, positionY:0, }, methods:{ //点击返回顶部 returnTop:function(){ var isDrag = this.$refs.returnTop.getAttribute('drag-...

    html部分

    <body>
    <div class="new-wrapper fullPage" ref="fullPage" id="app" v-cloak>
    	<div class="returnTop" 
    		ref="returnTop"
    		@click="returnTop" 
    		v-show="showReturnTop" 
    		@mousedown.stop="dragMove"
    	>
    		
    	</div>
    </div>
    </body>

     css部分

     

    .returnTop{
    	color: #fbb810;
    	text-align: center;
    	position: fixed;
    	right:30px;
    	bottom:22px;
    	cursor:pointer;
    	z-index: 2;
    	width:60px;
    	height:60px;
    	background: url(<%=basePath%>images/returnTop.png) no-repeat;
    	background-size: 100% 100%;
    }

    js部分

    new Vue({
    	el: '#app',
    	data: {
    		//拖拽返回顶部
    		positionX:0,
            positionY:0,
    	},
    	methods:{
    		//点击返回顶部
    		returnTop:function(){
    			var isDrag = this.$refs.returnTop.getAttribute('drag-flag');
    			if (isDrag === 'true') {
    				return false;
    			}else{
    				this.directToMove(1,'pre');
    			};
    		},
    		//拖拽返回顶部
    		dragMove:function(e){
    			var dragStartTime = '';
          		        var dragEndTime = '';
                            var target = e.target;        
    			target.setAttribute('drag-flag', false);
    			dragStartTime = new Date().getTime()
                            //鼠标相对元素的位置
                            var disX = e.clientX - target.offsetLeft;
                            var disY = e.clientY - target.offsetTop;
                            document.onmousemove = function(e){       
                                //元素的位置
                                var left = e.clientX - disX;    
                                var top = e.clientY - disY;
                    
                                this.positionX = top;
                                this.positionY = left;
                    
                                target.style.left = left + 'px';
                                target.style.top = top + 'px';
    			    dragEndTime = new Date().getTime();
    			    if (dragEndTime - dragStartTime > 200) {
    				target.setAttribute('drag-flag', true)
    			    };
                            };
                            document.onmouseup = function(e) {
                                document.onmousemove = null;
                                document.onmouseup = null;
                            };
                    },
    	},
    });

     

     

    展开全文
  • vue 拖拽事件

    千次阅读 2019-04-26 11:47:03
    // darg.vue <style> #app{ position: relative; /*定位*/ top: 10px; left: 10px; width: 200px; height: 200px; background: #666; /*设置一下背景...
    // darg.vue
    
    <style>
        #app{
            position: relative;     /*定位*/
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background: #666;       /*设置一下背景*/
        }
    </style>
    <body>
        <div id="app" @mousedown="move">       <!--绑定按下事件-->
            {{positionX}}
            {{positionY}}
        </div>
    </body>
    
    //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
    
    <style>
        #app{
            position: relative;     /*定位*/
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background: #666;       /*设置一下背景*/
        }
    </style>
    <body>
        <div id="app" v-drag>       <!--实现用指令形式实现拖拽效果-->
            
        </div>
    </body>
    
    //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;
                        };
                    };
                }
            }
        }
    });
    

    原文地址:https://segmentfault.com/a/1190000014572113

    展开全文
  • 项目需求:使这两个按键可以上下拖动,而且这两个按钮还有点击事件 <span class="action-btn" ref="showDoc" :class="showDoc ? 'hide': 'show'" @click="handShowDoc" @mousedown="mouseDownHandDoc($event)" @...

    在这里插入图片描述
    项目需求:使这两个按键可以上下拖动,而且这两个按钮还有点击事件

    <span class="action-btn" ref="showDoc" :class="showDoc ? 'hide': 'show'" @click="handShowDoc" @mousedown="mouseDownHandDoc($event)" @mouseup="mouseUpHandDoc($event)">{{ showDoc ? '隐藏' : '显示' }}文档</span>
    <span class="action-btn" ref="showTools" :class="showLabTools?'tools-hide': 'tools-show'" @click="handShowTools" @mousedown="mouseDownHandTools($event)" @mouseup="mouseUpHandTools($event)">{{ showLabTools ? '隐藏' : '显示' }}工具栏</span>
    
    export default {
    	data () {
    		moveDoc: { //显示文档初始位置
                    x: null,
                    y: null
                },
             moveTools:{ //显示工具栏位置
                    x: null,
                    y: null
             }
    	},
    	methods:{
    		handShowDoc(){ //判断显示文档是点击事件还是拖拽事件
                let isClick = this.$refs.showDoc.getAttribute('flag')
                if(isClick ==='true') this.showDoc=!this.showDoc
                else return false
            },
            mouseDownHandDoc(event){//显示文档的鼠标按下事件
                this.moveDoc.y = event.pageY - this.$refs.showDoc.offsetTop
                event.currentTarget.style.cursor = 'move'
                window.onmousemove = this.mouseMoveHandDoc
                this.$refs.showDoc.setAttribute('flag', false)
                const firstTime = new Date().getTime()
                document.onmouseup = () => {
                    document.onmousemove = null
                    document.onmouseup = null
                    // onmouseup 时的时间,并计算差值
                    const lastTime = new Date().getTime()
                    if ((lastTime - firstTime) < 200) {
                        this.$refs.showDoc.setAttribute('flag', true)
                    }
                }
            },
            mouseMoveHandDoc (event) { //显示文档的鼠标移动事件
                let moveTop = event.pageY - this.moveDoc.y + 'px'
                this.$refs.showDoc.style.top = moveTop
            },
            mouseUpHandDoc(event){ //显示文档的鼠标抬起事件
                window.onmousemove = null
                event.currentTarget.style.cursor = 'move'
            },
    	}
    }
    
    展开全文
  • 主要为大家详细介绍了vue开发拖拽进度条滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现移动端可拖拽浮球,供大家参考,具体内容如下 1 首先创建一个div mousedown=down touchstart.stop=down mousemove=move touchmove.stop=move mouseup=end touchend.stop=end click=showRewardDesc xss=...
  • vue实现拖拽效果

    2020-11-27 21:49:07
    vue中实现拖拽效果,供大家参考,具体内容如下 首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3(事件对象中记录的鼠标位置) 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt...
  • 由于项目需求需要写拖拽事件(需求,是一个按钮,可以在页面上自由拖拽点击),自己定义后,最开始想到的是利用ref获取div标签,在对其进行dom操作,发现不行。在查看官方文档发现了自定义指令(自己学习的时候漏掉的...
  • 拖动的元素在鼠标按下时通过时间差给元素添加一个属性(drag-flag),若超过规定时间则认为是在拖拽,属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。 html: <div ...
  • 给标签绑定事件,组件标签需要.native修饰符 <Suspend class="suspend_box" @mousedown.native="down()" @touchstart.prevent.native="down()" @mousemove.native="move()" @touchmove.prevent.native="move...
  • 本篇文章主要介绍了js实现鼠标拖拽多选功能示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 原理主要是让文本跟随鼠标移动,然后修改相应拖拽位置的数据值,主要使用mousedown和mouseup <template> <div class="flex" style="display:flex"> <div class="options"> <div v-for="...
  • vue拖拽练习

    2017-06-15 23:22:02
    <title></title> <script type="text/javascript" src="vue_2.js"> 自定义指令 v-drag --> <div v-drag :
  • 地图需要放大时候进行拖拽鼠标松开后,还是会返回上一级 <div id="parent" @click="closeMap" @mousedown="mousedown" > <div v-if="!flagMap" id="chartDs" ref="totalChart" style="width: 900px;...
  • 使用插件:vue-dragscroll 使用方法:csdn教程博客 官网使用案例
  • 本文实例为大家分享了vue实现拖拽x效果的具体代码,供大家参考,具体内容如下 实现拖拽之前,先了解几个小常识: 这两种获取鼠标坐标的方法,区别在于基于的对象不同: pageX和pageY获取的是鼠标指针距离文档(HTML...
  • 基于Vue实现拖拽效果

    2020-11-30 11:51:15
    在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是...
  • 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。 github 地址:https://github.com/qq449245884/vue-okr-tree 演示事例 http://www.longs.
  • 主要为大家详细介绍了Vue实现开关按钮拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1、通过自定义指令 + 鼠标事件实现 // 自定义指令 directives:{ /* 指令钩子函数会被传入以下参数: el:指令所绑定的元素,可以用来直接操作 DOM 。 binding:一个对象,包含以下属性: name:...
  • 基于vue 图片拖拽放大缩小查看npm包
  • 1.PC端Vue项目(或html)实现鼠标左右拖拽盒子滑动 2.同一盒子上鼠标移入移出事件和单击事件click冲突问题 3.子盒子移动,如何让边界不超出父盒子边界? 注意: 本文主要涉及到PC端鼠标横向拖拽问题的解决,移动端的...
  • 因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的时间差,与200ms作比较,作为全局变量。由于vue的directives自定义指令中无法使用th
  • 基于Vue鼠标拖拽选择组件 演示版 入门 安装 npm install vue-drag-select-pro --save yarn add vue-drag-select-pro 文档 进口 import Vue from 'vue' import App from './App.vue' import vueDragSelectPro from ...
  • 为何我在进行拖拽的时候 假如我有4个列表 我从第一个列表内将一个button 拖拽到第四个列表 我并不想让他有拖拽效果 所以给这个button move事件做了一个判断 当他到第四个列表的时候return false 无法拖拽到第四个...
  • vue拖拽事件配置

    2020-06-18 11:28:27
    // 拖拽指令 Vue.directive("drag", function(el) { el.onmousedown = function(e) { //获取鼠标点击处分别与div左边和上边的距离:鼠标位置-div位置 var divx = e.clientX - el.offsetLeft; var divy = e....
  • 主要介绍了vue+mousemove实现鼠标拖动功能,文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下
  • 可以通过mousewheel.prevent来执行该事件 因为我只有一个页面,所以我直接在大盒子里调用 <div class="allcontent" @mousewheel.prevent="rollImg">

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,179
精华内容 1,271
关键字:

vue鼠标拖拽事件

vue 订阅