精华内容
下载资源
问答
  • 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>
    
    
    展开全文
  • 问题:使用@mousemove绑定事件拖拽速度过快有严重的卡顿,只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了。 解决办法:结合原生js实现拖动 一,项目中的组件 <template> <div> <div ...

    问题:使用@mousemove绑定事件拖拽速度过快有严重的卡顿,只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了。

    解决办法:结合原生js实现拖动

     一,项目中的组件

    <template>
      <div>
        <div class="ctn ctn1">
          <div class="sub sub1" v-for="(site, index) in list" :key="index">
            <div
              class="dragCtn fixed"
              @mousedown="mousedown(index, $event)"
              @mouseup="mouseup(index, $event)"
            >
              {{ site.name }}
              <span>{{site.x}},{{site.y}}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          list: [
            {
              name: "位置1",
              index: 0,
              x:0,
              y:0
            },
             {
              name: "位置2",
              index: 1,
               x:0,
              y:0
            },
             {
              name: "位置3",
              index: 2,
               x:0,
               y:0
            },
          ],
          sb_bkx: 0,
          sb_bky: 0,
          x:0,
          y:0
        };
      },
      methods: {
        mousedown(index, event) {
          let that = this;
          var event = event || window.event;
          var _target = event.target;
          var startx = event.clientX;
          var starty = event.clientY;
          var sb_bkx = startx - event.target.offsetLeft;
          var sb_bky = starty - event.target.offsetTop;
          var ww = document.documentElement.clientWidth;
          var wh = window.innerHeight;
          if (event.preventDefault) {
            event.preventDefault();
          } else {
            event.returnValue = false;
          }
          document.onmousemove = function (ev) {
            var event = ev || window.event;
            var scrolltop =document.documentElement.scrollTop || document.body.scrollTop;
            if (
              event.clientY < 0 ||
              event.clientX < 0 ||
              event.clientY > wh ||
              event.clientX > ww
            ) {
              return false;
            }
            var endx = event.clientX - sb_bkx;
            var endy = event.clientY - sb_bky;
            _target.style.left = endx + "px";
            _target.style.top = endy + "px";
            that.list[index].x = endx;
            that.list[index].y = endy;
    
            console.log(endx,endy)
          };
        },
        mouseup(e) {
          document.onmousemove = null;
        },
      },
    };
    </script>
    <style lang='less' scoped>
    .ctn {
      line-height: 50px;
      cursor: pointer;
      font-size: 20px;
      text-align: center;
      float: left;
      border: 1px solid red;
    }
    .sub:hover {
      background: #e6dcdc;
      color: white;
      width: 100px;
    }
    .ctn1 {
      border: 1px solid green;
      width: 100px;
    }
    .ctn2 {
      border: 1px solid black;
      width: 100px;
      margin-left: 50px;
    }
    .fixed {
      width: 100px;
      height: 100px;
      position: fixed;
      background: red;
      left: 10px;
      top: 15px;
      cursor: move;
      border-radius: 50px;
    
    }
    </style>

    二,单页面中的使用

    <!DOCTYPE html>
    <html>
    	<head>
    		<title>vue结合原生js实现拖动</title>
    		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<div class="ctn ctn1">
    				<div class="sub sub1" v-for="(site, index) in list" :key="index">
    					<div class="dragCtn fixed" @mousedown="mousedown(index, $event)" @mouseup="mouseup(index, $event)">
    						{{ site.name }}
    						<span>{{site.x}},{{site.y}}</span>
    					</div>
    				</div>
    			</div>
    		</div>
    		<script>
    			new Vue({
    				el: '#app',
    				data: {
    					list: [{
    							name: "位置1",
    							index: 0,
    							x: 0,
    							y: 0
    						},
    						{
    							name: "位置2",
    							index: 1,
    							x: 0,
    							y: 0
    						},
    						{
    							name: "位置3",
    							index: 2,
    							x: 0,
    							y: 0
    						},
    					],
    					sb_bkx: 0,
    					sb_bky: 0,
    					x: 0,
    					y: 0
    				},
    				methods: {
    					mousedown: function(index, event) {
    						let that = this;
    						var event = event || window.event;
    						var _target = event.target
    						var startx = event.clientX;
    						var starty = event.clientY;
    						var sb_bkx = startx - event.target.offsetLeft;
    						var sb_bky = starty - event.target.offsetTop;
    						var ww = document.documentElement.clientWidth;
    						var wh = window.innerHeight;
    						if (event.preventDefault) {
    							event.preventDefault();
    						} else {
    							event.returnValue = false;
    						};
    						document.onmousemove = function(ev) {
    							var event = ev || window.event;
    							var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    							if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX >
    								ww) {
    								return false;
    							};
    							var endx = event.clientX - sb_bkx;
    							var endy = event.clientY - sb_bky;
    							_target.style.left = endx + 'px';
    							_target.style.top = endy + 'px';
    							that.list[index].x = endx;
    							that.list[index].y = endy;
    
    							console.log(endx, endy)
    						}
    					},
    					mouseup: function(e) {
    						document.onmousemove = null;
    					}
    				}
    			})
    		</script>
    		<style>
    			.ctn {
    				line-height: 50px;
    				cursor: pointer;
    				font-size: 20px;
    				text-align: center;
    				float: left;
    			}
    
    			.sub:hover {
    				background: #e6dcdc;
    				color: white;
    				width: 100px;
    			}
    
    			.ctn1 {
    				border: 1px solid green;
    				width: 100px;
    			}
    
    			.ctn2 {
    				border: 1px solid black;
    				width: 100px;
    				margin-left: 50px;
    			}
    
    			.fixed {
    				width: 100px;
    				height: 100px;
    				position: fixed;
    				background: red;
    				left: 10px;
    				top: 15px;
    				cursor: move;
    				border-radius: 50px;
    			}
    		</style>
    	</body>
    </html>
    

    三,最终效果图

     

    展开全文
  • 主要为大家详细介绍了vue实现拖拽的简单案例,不超出可视区域,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vue+mousemove实现鼠标拖动功能,文中给大家介绍了鼠标移动过快拖动就失效问题的解决方法,需要的朋友可以参考下
  • vue 鼠标停止事件

    千次阅读 2019-06-19 15:43:01
    最近由于是大屏项目一直在使用vue遇到一个需求:就是长时间未操作鼠标就自动切换页面展示。但是js中是没有这个事件的,所以我们只能使用其他事件巧妙的转化一下。我的鼠标停止事件就是利用一个mousemove实现的: /...

    最近由于是大屏项目一直在使用vue遇到一个需求:就是长时间未操作鼠标就自动切换页面展示。但是js中是没有这个事件的,所以我们只能使用其他事件巧妙的转化一下。我的鼠标停止事件就是利用一个mousemove实现的:

    //初始化
                    var _this = this;
                    var diff = 3000,//未操作触发间隔
                        firstTime = new Date().getTime(),
                        lastTime = new Date().getTime(),
                        indulge = false,//阀门
                        viewNub = 1;
                    //启动
                    var switchTime = setInterval(anm, 5000);
                    //停止
                    $(document).on('mousemove', function () {
                        indulge = true;
                        clearInterval(switchTime);
                        firstTime = new Date().getTime();
                        console.log("moving");
                    });
                    //再启动
                    setInterval(function () {
                        lastTime = new Date().getTime();
                        if (lastTime - firstTime > diff && indulge) {
                            indulge = false;
                            viewNub = $(".mid-top-menu li.active").index();//如果中途操作鼠标保存选中的下标,下次变化从次开始
                            switchTime = setInterval(anm, 5000);
                        }
                    }, 1000);
    
                    //自动动作
                    function anm() { 
                        console.log("切换页面");
                    }

    思路是利用时间差来判断是否超过设置阈值,超过则开始切换。

    展开全文
  • 项目需求:使这两个按键可以上下拖动,而且这两个按钮还有点击事件 <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写法非常的卡顿 <div v-for="(item, i) in cardList" :key="item" :ref="'box' + (i + 1)" :class="'card card' + item" @mousedown="down($event, i + 1)" @mousemove="move($event, i + 1)
  • vue自定义移动端touch事件,点击、滑动、长按事件.将以上代码保存到一个js文件内,引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
  • vue拖动鼠标阻止文本被选 描述:pc端,拖动悬浮按钮,页面文本会随着悬浮按钮的拖动出现被选,虽然没什么影响,但是很影响用户体验。 如图:(图字是左侧,博主左右不分) 修复 onmousemove(e){ let et= e || ...
  • vue实现拖动元素

    2021-03-29 14:46:06
    拖动元素要加 v-drag <div v-drag >{{ fromData.text }}</div> directives: { drag: function(el) { let dragBox = el; dragBox.onmousedown = e => { //算出鼠标相对元素的位置 let disX =...
  • } js部分 new Vue({ el: '#app', data: { //拖拽返回顶部 positionX:0, positionY:0, }, methods:{ //点击返回顶部 returnTop:function(){ var isDrag = this.$refs.returnTop.getAttribute('drag-...
  • 鼠标拖动图片(完整代码在最后) 预览: 层级关系主要是: 最外层控制整个区域大小的盒子(mapbox) 中间层用来包裹图片的table(使用 td 才可以使用百分比控制图片大小) 最内层图片本体 <template> ;height:'+...
  • Vue鼠标点击事件失效解决方法

    千次阅读 2020-06-01 16:47:48
    再electron和vue开发的桌面应用中,为应用添加了一个拖动功能后,再拖动内部所有的鼠标事件失效,无法触发 解决: 因为父级元素设置了样式: -webkit-app-region:drag,阻止了鼠标的点击事件,只需要再内部需要点击...
  • vue之canvas拖动元素

    2020-12-28 15:57:08
    vue之canvas拖动元素 支持选中,置顶,支持以鼠标点前点拖动
  • vue 鼠标拖动

    2019-10-09 00:30:17
    Vue.directive( " drag " ,(el,{modifiers,value})=> { el.style.position = " absolute " ; let {x,y} = modifiers; el.addEventListener( " mousedown " ,donw); var disX,disY; function donw(e...
  • vue实现拖动div

    千次阅读 2019-07-18 15:11:37
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...script type="text/javascript" src="./js/vue.min.js"></scri...
  • 鼠标拖动绘制矩形框(canvas)varlayer=0;CanvasExt={drawRect:function(canvasId,penColor,strokeWidth){varthat=this;that.penColor=penColor;that.penWidth=strokeWidth;varcanvas=document.getElementById(canvas...
  • PC的鼠标拖动事件 移动端的手指事件 能拿到被移动元素的高宽,距离可移动范围内的距离 拖动事件与手指事件 顾名思义,就是通过不同的触发条件来达到你想实现的拖动效果,至于第三条的可移动范围,可以是 父级dom 的...
  • <input style="width: 50px;" :value="record.click" @focus="() => toFocus(record)" @blur="toDo(record,$event)" ...toDo(record,e)鼠标移开 const that = this; let data = { .
  • 使用canvas 实现了用鼠标拖动绘制各种图形其中包括 矩形,圆形,箭头,画笔使用方法var paint = Ypaint(canvas)绘制圆形:paint.chooseCircle()圆形其他参数圆形的粗细 paint.outerParams.circle.lineWidth圆形的...
  • vue之canvas元素拖动及改变形状 vue之canvas元素拖动及改变形状
  • vue 拖拽事件

    千次阅读 2019-04-26 11:47:03
    // darg.vue <style> #app{ position: relative; /*定位*/ top: 10px; left: 10px; width: 200px; height: 200px; background: #666; /*设置一下背景...
  • 2.同一盒子上鼠标移入移出事件和单击事件click冲突问题 3.子盒子移动,如何让边界不超出父盒子边界? 注意: 本文主要涉及到PC端鼠标横向拖拽问题的解决,移动端的解决方案很多,请详见其他文章,不在这里赘述. <2&...
  • 使用vue实现滑动拼图验证码 踩到的坑 使用@mousemove绑定事件拖拽速度过快有严重的卡顿 源代码 <template> <div class="slider-verify"> <div class="img"> <img src="./101.jpg" class=...
  • 拖动的元素在鼠标按下时通过时间差给元素添加一个属性(drag-flag),若超过规定时间则认为是在拖拽,属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。 html: <div ...
  • // clientX 鼠标相对于浏览器左上角x轴的坐标; 不随滚动条滚动而改变; // clientY 鼠标相对于浏览器左上角y轴的坐标; 不随滚动条滚动而改变; // element.offsetTop 指 element距离上方或上层控件的位置,整型...

空空如也

空空如也

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

vue鼠标拖动事件

vue 订阅
友情链接: 06-STM32F429_ADC.rar