关于Vue 自定义指令实现元素拖动的详细代码

2024-12-17 01:23:00

昨天在做的一个功能时，同时弹出多个框展示多个表格数据。

这些弹出框可以自由拖动。单独的拖动好实现，给元素绑定 mousedowm 事件。

这里就想到了 Vue 里面自定义指令来实现。

一、自定义指令

在使用自定义指令之前，先对自定义指令有一定的了解。从以下几个方面着手：

1、自定义指令定义范围

全局注册和组件内注册（注册的范围根据实际业务需求来）

// 注册一个全局指令，可以在任何组件使用
Vue.directive('focus',{
    // 当被绑定的元素插入 DOM 时
    inserted: function(el){
        // 聚焦元素
        el.focus()
    }
})

// 在组件内注册，只能当前组件使用
directives:{
    focus:{
        inserted: function(el){
            el.focus()
        }
    }
}

// 使用
<input v-focus>

2、钩子函数

对于一个指令有下面一些钩子函数可以选择：

bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
componentUpdated：指令所在的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

3、函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象，包含以下 property：

name：指令名

value：指令绑定的值

oldValue：指令绑定的前一个值

expression：字符串形式的指令表达式

arg：传给指令的参数

modifiers：一个包含修饰符的对象

vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点

二、拖动实现

拖动的实现：给目标 Element 注册 mousedown 事件，在这个事件里面再对 document 的 mousemove 和 mouseup 注册。

代码如下：

directives: {
    drag: {
      // 拖动标题栏，让父元素改变位置，这里所以选择 inserte的
      inserted: (el) => {
        const target = el.parentElement
        el.onmousedown = (e) => {
          const disX = e.pageX - target.offsetLeft
          const disY = e.pageY - target.offsetTop
          document.onmousemove = (de) => {
            target.style.left = de.pageX - disX + 'px'
            target.style.top = de.pageY - disY + 'px'
          }
          document.onmouseup = (de) => {
            document.onmousemove = document.onmouseup = null
          }
        }
      }
    }
  }

在需要的 Element 上面使用 v-drag 即可。

到此这篇关于Vue 自定义指令实现元素拖动的文章就介绍到这了,更多相关Vue 自定义指令元素拖动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue+ts实现元素鼠标拖动效果

本文实例为大家分享了vue+ts实现元素鼠标拖动效果的具体代码,供大家参考,具体内容如下实现效果相关使用属性 // clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: // clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: // element.offsetTop 指 element距离上方或上层控件的位置,整型,单位像素. // element.offsetLeft 指 element距离左方或上层控件的位置,整型,单位像素. // ele
vue全局自定义指令-元素拖拽的实现代码

小白我用的是vue-cli的全家桶,在标签中加入v-drap则实现元素拖拽, 全局指令我是写在main.js中 Vue.directive('drag', { inserted: function (el) { el.onmousedown=function(ev){ var disX=ev.clientX-el.offsetLeft; var disY=ev.clientY-el.offsetTop; document.onmousemove=function(ev){ var l=ev.cl
Vuejs通过拖动改变元素宽度实现自适应

需求: 原理: 拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算:当拖动分隔线1时,计算元素框left和mid:当拖动分隔线2时,计算元素框mid和right:同时设置元素框最小值以防止元素框拖没了(其实是被遮住了).使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获. html部分代码: <template> <div> <ul class=&q
关于Vue 自定义指令实现元素拖动的详细代码

昨天在做的一个功能时,同时弹出多个框展示多个表格数据. 这些弹出框可以自由拖动.单独的拖动好实现,给元素绑定 mousedowm 事件. 这里就想到了 Vue 里面自定义指令来实现. 一.自定义指令在使用自定义指令之前,先对自定义指令有一定的了解.从以下几个方面着手: 1.自定义指令定义范围全局注册和组件内注册(注册的范围根据实际业务需求来) // 注册一个全局指令,可以在任何组件使用 Vue.directive('focus',{ // 当被绑定的元素插入 DOM 时 inserted:
vue自定义指令实现元素滑动移动端适配及边界处理

目录效果演示核心属性实现思路代码注意自定义指令this指向问题滑动后点击事件被触发移动端滑动问题效果演示核心属性 Element.clientWidth:元素可视宽度. Element.clientHeight:元素可视高度. MouseEvent.clientX:鼠标相对于浏览器左上顶点的水平坐标. MouseEvent.clientY:鼠标相对于浏览器左上顶点的垂直坐标. Touch.clientX:触点相对于浏览器左上顶点的水平坐标(移动端属性). Touch.clie
如何使用vue自定义指令构建拖放插件

我们都知道html5的拖放特性,利用它可以很方便的实现拖拽和放置功能,比如一些选择类操作的使用场景,让用户去拖拽比鼠标点击更容易接受和理解.今天我们就利用这一特性,结合vue的自定义指令,来实现一个简单但是实用的拖放插件. 为什么叫它插件?因为我们的目标不是开发一个vue组件,而是两个vue的自定义指令,并且最终会把这两个自定义指令封装到一个es6的class里,在实际项目中引入就可以很方便的使用了. 大部分的拖放使用场景都是把一些待选元素从A区域拖放到B区域.这里就涉及到两个概念,一个是可拖拽
Vue自定义指令directive的使用方法分享

1. 一个指令定义对象可以提供如下几个钩子函数(均为可选) bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中). update:只要当前元素不被移除,其他操作几乎都会触发这2个生命周期,先触发update后触发componentUpdate.虚拟DOM什么时候更新:只要涉及到元素的隐藏.显示(display)值的改变.内容的改变等都会触发虚拟DOM更新. component
Vue自定义指令使用方法详解

Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数 2.钩子函数定义对象的钩子函数如下: 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: *name: 指令名,不包括 v- 前缀. *value: 指令的绑定值, 例如: v-my
Vue自定义指令介绍(2)

Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1> 其中,v-是Vue的标识,if是指令ID,yes是expression.yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示. expression还可以使用内联的模式,任何依赖的属性发生变化时都会触发指令的执行.如: <h1 v-if=&quo
vue自定义指令directive实例详解

下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了. 来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下: Vue.directive
vue自定义指令用法经典实例小结

本文实例总结了vue自定义指令用法.分享给大家供大家参考,具体如下: 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头拖拽: 二.自定义元素指令:(用处不大) Vue.elementDirective('zns-red',{ bind:f
Vue自定义指令写法与个人理解

什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用. 如果你正在使用Vue(或者Angular), 你可能已经很熟悉其中的一些指令, 如: v-if, v-else等等. 我们将从了解一些基础开始, 但是如果你更愿意直接看例子, 请直接往下滚动. 这些例子也能很
使用Vue自定义指令实现Select组件

本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu

关于Vue 自定义指令实现元素拖动的详细代码

一、自定义指令

二、拖动实现

相关推荐

随机推荐