精华内容
下载资源
问答
  • 1:先理解clientY pageY screenY layerY offsetY的区别 1:clientY 指的是距离可视页面...4:layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 5:offsetY 指的是距离它自己左上角的距离 2:思路 1:onmo...

    1:先理解clientY pageY screenY layerY offsetY的区别

    1:clientY 指的是距离可视页面左上角的距离
    2:pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
    3:screenY 指的是距离屏幕左上角的距离
    4:layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
    5:offsetY 指的是距离它自己左上角的距离

    2:思路

    1:onmousedown:鼠标按下事件
    2:onmousemove:鼠标移动事件
    3:onmouseup:鼠标抬起事件
    基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下。

    	<template>
            <div class="drag">
                <div id="lucky"
                               @mousedown="down" @touchstart="down"
                               @mousemove="move" @touchmove="move"
                               @mouseup="end" @touchend="end" @click="click" style="position: relative">
                             
                </div>
            </div>
        </template>
    
        <script>
        export default {
            name: "drag",
            data() {
                return {
                    flags: false,
            		position: { x: 0, y: 0 },
            		nx: '',
            		ny: '',
            		dx: '',
            		dy: '',
            		xPum: '',
            		yPum: '',
                };
            },
          methods:{
          	// 实现移动端拖拽
          	down(){
            	var moveDiv = document.getElementById('lucky');
            	this.flags = true;
            	var touch;
            	if(event.touches){
              		touch = event.touches[0];
            	}else {
              		touch = event;
            	}
            	this.position.x = touch.clientX;
            	this.position.y = touch.clientY;
            	this.dx = moveDiv.offsetLeft;
            	this.dy = moveDiv.offsetTop;
          	},
          	move(){
            	var moveDiv = document.getElementById('lucky');
            	if(this.flags){
              		var touch ;
              	if(event.touches){
                	touch = event.touches[0];
              	}else {
                	touch = event;
              	}
              	this.nx = touch.clientX - this.position.x;
                // this.ny = touch.clientY - this.position.y;
    
              	this.xPum = this.dx+this.nx;
              	// this.yPum = this.dy+this.ny;
    
              	const codeBtnWidth = document.getElementById('id-code-btn').clientWidth;  //可以滑动的范围
              	if(this.xPum>=0 && this.xPum<=codeBtnWidth-40){
                	moveDiv.style.left = this.xPum+"px";
              	}
              	// moveDiv.style.left = this.xPum+"px";
              	// moveDiv.style.top = this.yPum +"px";
              	//阻止页面的滑动默认事件;
              	event.preventDefault();
            	}
          	},
          	//鼠标释放时候的函数
          	end(){
            	if(this.xPum >= this.offsetX -3 && this.xPum <= this.offsetX +3){
              		this.$toast.bottom('验证成功!');
              		this.isCheck = true;    //移动滑块成功
            	}else{
              		this.$toast.bottom('验证失败!');
            	}
            		this.flags = false;
            		// 鼠标释放的时候从这里判断块是否被拖到窗口外变成负值,从而进行恢复
          	},
          	click() {
            	console.log('click')
          	}
          }
        };
        </script>
        <style scoped>
        .drag {
            width: 100%;
            height: 500px;
            background-color: #fff;
        }
        #lucky {
        	width: 40px;
       	 	height: 40px;
        	background: #f5f6f7;
        	position: absolute;
        	top: 0;
        	z-index: 20070;
        	border: 1px solid #e1e1e1;
      	}
        </style>
    
    展开全文
  • vue中使用zrender实现页面元素拖拽

    千次阅读 2020-07-16 09:30:34
    这也算是一个比较经典的页面交互,长按鼠标,可以将页面上的一些dom元素拖拽到指定区域,生成指定图形 所用到的技术就是h5的draggable属性和canvas画布,而本文所用的zrender,是一个对canvas的常见操作进行了简单...

    业务描述

    这也算是一个比较经典的页面交互,长按鼠标,可以将页面上的一些dom元素拖拽到指定区域,生成指定图形
    所用到的技术就是h5的draggable属性和canvas画布,而本文所用的zrender,是一个对canvas的常见操作进行了简单封装的库(ps:著名的echarts.js底层就是又基于zrender构建的)

    准备工作

    npm install zrender -S
    

    代码

    话不多说,直接上代码,一些坑我也会在后面指出
    zrender可直接在组件中引入

    // vue template层代码
    <div id="myCanvas" ref="myCanvas" @drop="drop_handler" @dragover="dragover_handler" />
    
    <el-submenu index="1">
            <template slot="title">
                 <img src="@/assets/images/filter.png" width="14" height="14">
                 <span>demo</span>
            </template>
            <el-menu-item-group>
                 <el-menu-item index="1-1" draggable="true" @dragleave.native="dragleave_handler">要拖拽元素</el-menu-item>
                 <el-menu-item index="1-2" >暂不需要拖拽元素</el-menu-item>
            </el-menu-item-group>
    </el-submenu>
    

    template层这里,我有用到element-ui的导航栏组件,实际工作中,换成自己想要拖拽的dom元素即可

    • 先将要拖拽元素的draggable属性设为true
    • 监听拖拽离开事件dragleave,注意因为是element-ui组件,要添加.native修饰, 否则不会触发,其他的一些事件比如dragstart、dragend的介绍等可以查看mdn官网文档
    • id为myCanvas的div就是用来生成图形的区域,css要先设置好高度和宽度,被拖拽的目标为源对象,要拖拽到(元素放置)的区域是目标对象,这个myCanvas就是目标对象
    • 关于源对象和目标对象,它们都有自己的专属事件监听,目标对象,因为是放置元素的区域,所以监听drop放置事件,还有dragover事件,注意:drop和dragover这两个事件一定要一起写上,不然drop放置事件无法触发
    // vue script层代码
    import zrender from 'zrender'
    export default {
     data() {
       return {
          zr: {},
          group: {},
          rectText: ''
       }
     },
     mounted() {
        this.zrenderInit()
     },
     methods:{
        zrenderInit() {
          const dom = this.$refs.myCanvas
          this.zr = zrender.init(dom)
          this.group = new zrender.Group()
        },
        draw(x, y, text) {
          const option = {
            shape: {
              x: x,
              y: y,
              r: 10,
              width: 100,
              height: 30
            },
            style: {
              fill: 'transparent',
              stroke: '#f3a63b',
              lineWidth: 2,
              text: text,
              fontSize: '16',
            },
            hoverable: true,
            draggable: true,
          }
          const Rect = new zrender.Rect(option)
          this.group.add(Rect)
          this.zr.add(this.group)
        },
        dragleave_handler(ev) {
          ev.preventDefault()
          this.rectText = '拖拽元素1'
        },
        drop_handler(ev) {
          ev.preventDefault()
          this.draw(ev.offsetX, ev.offsetY, this.rectText)
        },
        dragover_handler(ev) {
          ev.preventDefault()
        }
      }
    }
    
    • zrenderInit方法做一些初始化的准备工作, draw方法里面,用zrender画了个圆角矩形,矩形中央的文字是“拖拽元素1”
    • drop_handler作为处理放置事件的方法,监听offsetX、offsetY这两个值的变化,然后作为参数传参,生成矩形的横纵坐标,就可以随着鼠标的拖拽灵活变化
    • 各个handler处理事件,一定要先添加e.preventDefault,来阻止浏览器的默认行为,否则事件不会触发
    展开全文
  • Vue移动端实现元素拖拽移动 <template> <div ref="dragBox" @touchstart="touchstartHandle('dragBox',$event)" @touchmove="touchmoveHandle('dragBox',$event)"> 可拖拽元素 </div> <...

    Vue移动端实现元素拖拽移动

    <template>
        <div ref="dragBox" 
             @touchstart="touchstartHandle('dragBox',$event)"   
             @touchmove="touchmoveHandle('dragBox',$event)">
             可拖拽元素
        </div>
    </template>
    
    data() {
        return {
            coordinate: {
                client: {},
                elePosition: {}
            }
        }
    }
    
    methods: {
        touchstartHandle(refName, e) {
            let element = e.targetTouches[0]
            // 记录点击的坐标
            this.coordinate.client = {
                x: element.clientX,
                y: element.clientY
            }
            // 记录需要移动的元素坐标
            this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
            this.coordinate.elePosition.top = this.$refs[refName].offsetTop
        },
        touchmoveHandle(refName, e) {
            let element = e.targetTouches[0]
            // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
            let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
            let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
            // 限制可移动距离,不超出可视区域
            x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
            y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
            // 移动当前元素
            this.$refs[refName].style.left = x + 'px'
            this.$refs[refName].style.top = y + 'px'
        }
    },
    

    基本上就直接可以实现效果,把方法直接套用在需要移动的元素上,如果拖拽移动时有可能会超出可视页面,那就需要再重新给你拖拽移动的元素整体调整宽高。

    展开全文
  • 附加条件:不能超出父元素实现思路: 使用vue自定义指令directives, 监听鼠标按下事件,计算按下时目标元素与父元素的距离,最后通过CSS position-absolute : left / top实现距离改变(父元素需要有宽高,且有...

    ecdc267ba9cf48cc8b42e74db81d9c3a.png

    附加条件:不能超出父元素

    实现思路: 使用vue自定义指令directives, 监听鼠标按下事件,计算按下时目标元素与父元素的距离,最后通过CSS position-absolute : left / top实现距离改变

    (父元素需要有宽高,且有position定位)

    1、vue文件中实现

    使用directives

    template中使用指令

    3ad435f473bd9e3956f96758b25d91ff.png

    script中定义指令

    methods

    2、main.js全局引入

    创建directives.js 在入口文件引入 并Vue.use,实现代码与文件内实现基本相同。

    vue官方directive使用方法

    3c7a21c0615b7d40cd7be7b64650a180.png

    项目中使用

    7eedc1452df5106ba01bea167068cf58.png

    在入口文件引入并使用

    b66600a55494126d90385a4490d9aa4a.png

    上述步骤完成后可直接在页面文件中使用

    679870eab22e47ce1a5c1e42ea287e7b.png

    3、小坑

    需注意如果css使用了transition过渡, 不能使用all 因为 left / top 改变也会发生过渡 导致发生拖拽延迟效果

    b975e5171d4c8cbd6be5f9aa0cc39dbc.png

    如果需要鼠标hover后有动画效果 可以分别写出来

    栗子

    12beb3586b97d32ca345e3d34002edf7.png
    展开全文
  • vue 拖拽元素到任意位置 使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyun/vue-drag-it-dude import DragItDude from 'vue-drag-it-dude'; export default ...
  • } Vue.directive('drag',function(el){ el.onmousedown = function(e){ //获取鼠标点击处分别与div左边和上边的距离:鼠标位置-div位置 var divx = e.clientX - el.offsetLeft; var divy = e.clientY - el....
  • (2) 第一个按钮控制第一个div元素拖拽,第二个按钮控制第二个div元素拖拽,而且它们互不影响。 2、问题: (1)前面写的拖拽代码,再次点击按钮后,元素还可以继续拖动。 (2)点击其中一个按钮,另一个按钮的状态也改变...
  • 接下来要讲的是如何在vue中实现元素拖动,并且拿到拖动元素相对于父元素的位置偏移量X、Y 下面我们看下页面的基本结构吧,我们结合图来介绍这个东西会好理解的多 上面看到了页面基本结构。container就是我们说的...
  • Vue.directive('drag',function(el){ el.onmousedown = function(e){ //获取鼠标点击处分别与div左边和上边的距离:鼠标位置-div位置 var divx = e.clientX - el.offsetLeft; var divy = e.clientY - el....
  • vue拖动滚动条与拖拽冲突 Vue拖动滚动 (vue-dragscroll) vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style). vue-...
  • 可视化页面编辑器,听起来可望不可即是吧,先来张动图观摩观摩一番! 实现这功能之前,在网上参考了很多资料,最终一无所获,五花八门的文章,都在述说着曾经的...dragstart // 开始拖拽一个元素时触发 draggable
  • vue元素嵌套iframe后绑在元素上的点击事件失效 点击事件和拖拽事件冲突 使用 focus-outside 库解决 iframe和父组件之间的通信问题
  • vuedraggable 是一款拖拽元素的插件。 插件地址:https://www.npmjs.com/package/vuedraggable 插件使用起来还是很简单的,官网给出了例子: &lt;draggable v-model="myArray" :options="{group:...
  • 介绍在我们日常开发中可能会面临很多交互上的问题,特别是在Web应用盛行的今天,在之前有段时间的文章中介绍过javascript的拖拽库sortablejs,Vue.Draggable就是基于Sortable.js的允许拖放和视图模型数组同步的组件...
  • 最近产品要求管理后台需要增加个拖动更换排序的功能 过去都是使用JQuery做的拖动。接触vue后打算找个vue插件体验下,于是乎,有了本篇。未搭建环境简洁引入版&lt;!-- CDNJS :: Vue (https://cdnjs.com/) --&...
  • 右边两个标签栏中的每个标签都可以被拖动,是目标元素。坐标的上中下三个框是容器,要做到两点。 一:标签拖到对应的容器范围内部时要背添加到这个容器内部 二:标签拖动进入后要自动生成一个固定样式的元素 以下...
  • Vue.directive('movable',{ bind(el){ let agent=window.navigator.userAgent.toLowerCase(),start,move,end //判断当前是移动端还是PC,移动端监听touch,PC监听mouse if(["android","iphone","symbianos",...
  • vue实现拖动div元素

    2019-09-24 05:07:26
    拖动div元素 let vm1 = new Vue({ el: '#app1' , // 自定义指令 directives:{ drag(el,bindings){ el.onmousedown = function (e){ var disx = e.pageX - el.offsetLeft; var disy = e.pageY...
  • vue移动端touch拖拽排序功能介绍:大致需求:整体思路:简单效果展示:具体实现:一、display:flex+v-for布局:二、touch事件绑定:三、卡片移动:四、获取手指所在位置:五、操作数组(删除或插入元素):六、手指...
  • 可视化页面编辑器 ...dragover // 当拖拽元素在可释放目标上移动时触发 drop // 当拖拽元素在可释放目标上被释放时触发 我们来看看怎么使用这些事件: <!-- 拖拽元素列表数据 --> [removed] // com 为对应
  • 在前期博文《Vue进阶(幺陆肆):vue自定义拖动指令》讲解了Vue如何自定义拖拽指令,以上方法只是简单实现了元素的基本拖拽,在视图可视化编辑功能中,不仅需要对页面元素进行拖拽,而且还需要实现页面元素可编辑。...
  • Vue实现鼠标拖拽

    千次阅读 2020-05-28 17:36:03
    Vue实现鼠标拖拽 要实现拖拽,必须要使用三大秘法:(pc端) 1、鼠标按下事件:onmousedown 2、鼠标移动事件:onmousemove 3、鼠标抬起事件:onmouseup 移动端拖拽: 1、当在屏幕上按下手指时触发:touchstart ...
  • vue实现弹框拖拽

    2021-02-18 16:30:29
    el-dialog弹框拖拽 1、在 utils 中新建 directives.js 文件 import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl...
  • vue实现弹窗拖拽

    2021-04-20 17:57:04
    // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelecto
  • vue中实现拖拽功能

    2021-05-28 14:53:25
    自定义的全局指令 提示:拖拽指令 文章目录自定义的全局指令一、拖拽1.自定义拖拽指令2.页面挂载3.css样式 提示:以下是本篇文章正文内容,下面案例可供参考 一、拖拽 ... const oDiv = el // 当前元素
  • vue页面的table标签进行单元格拖拽

    千次阅读 2019-05-08 13:29:43
    先上代码 ($event)" @dragover="allowDrop($event)" :style="subInfo.flg ? 'border: solid 1px;width: 150px;text-align: center;height: 75px;...小弟vue没用多久,如有问题,还请大家指出,谢谢
  • 基于vue实现可拖动弹框

    千次阅读 2021-01-13 16:17:26
    基于vue实现可拖动弹框 el-dialog弹框拖拽 在 utils 中新建 directives.js 文件 import Vue from 'vue' // 自定义元素实现弹框拖拽[重点] Vue.directive('draw', { inserted: function (el, binding, vNode) { ...
  • 本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from '...

空空如也

空空如也

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

vue页面元素拖拽

vue 订阅