vue使用自定义指令实现拖拽

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue使用自定义指令实现拖拽，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7575字，纯文字阅读大概需要11分钟。

内容图文

需求背景，工作中需要实现一个自定义打印模板的需求，能够实现单个及多个dom元素的同时拖拽，也能通过外部的input元素修改dom元素的样式。在npm和GitHub上找了各种已有的vue组件，不够灵活，效果都不是自己想要的

1.vue自定义指令

Vue.directive('dragx', (el, binding, vnode) => {
 // 默认参数
 let defaultOpts = {
 dragDirection: 'n, e, s, w, ne, se, sw, nw, all',
 dragContainerId: '', //
 dragBarClass: '', // 类选择器
 canDrag: true,
 canResize: true,
 multiSelect: false
 }
 let isMove = false
 let isResize = false
 let constraintDom
 let constraintRect
 let constraintRectHeight
 let constraintRectWidth
 binding.value = binding.value || {}
 let cfg = Object.assign({}, defaultOpts, binding.value)
 if (cfg.dragContainerId) {
 constraintDom = document.querySelector('#' + cfg.dragContainerId)
 constraintRect = constraintDom.getBoundingClientRect()
 constraintRectHeight = constraintRect.height
 constraintRectWidth = constraintRect.width
 }

 let getStyleNumValue = (style, key) => parseInt(style.getPropertyValue(key), 10)
 // 设置约束范围
 function setConstraint (data) {
 if (cfg.dragContainerId) {
 if (data.left <= 0) data.left = 0
 if (data.top <= 0) data.top = 0
 if (data.top + data.height + data.borderTop + data.borderBottom >= constraintRectHeight) data.top = constraintRectHeight - data.height - data.borderTop - data.borderBottom
 if (data.left + data.width + data.borderLeft + data.borderRight > constraintRectWidth) data.left = constraintRectWidth - data.width - data.borderLeft - data.borderRight
 }
 }

 el.onmousemove = e => {
 if (cfg.dragBarClass.length > 0 && e.target.classList.contains(cfg.dragBarClass) && cfg.canDrag) {
 el.style.cursor = 'move'
 return
 }
 el.style.cursor = ''
 }

 el.onmouseleave = e => {
 el.style.cursor = ''
 }

 el.onmousedown = e => {
 let clickId = (e.target || e.srcElement).id
 let posData = {
 x: e.pageX, y: e.pageY
 }
 el.onmouseup = e => {
 // dom元素选中时发送active事件
 if (!cfg.active) el.dispatchEvent(new CustomEvent('bindActive', { 'detail': { ...posData } }))
 }
 isMove = false
 if (cfg.dragBarClass.length > 0 && !e.target.classList.contains('icon-icon-resize')) {
 isMove = true
 isResize = false
 document.body.style.cursor = 'move'
 } else if (e.target.classList.contains('icon-icon-resize')) {
 isMove = false
 isResize = true
 }

 let style
 let rect
 let data
 let tableStyle

 style = window.getComputedStyle(el)
 rect = el.getBoundingClientRect()
 data = {
 width: getStyleNumValue(style, 'width'),
 height: getStyleNumValue(style, 'height'),
 left: getStyleNumValue(style, 'left'),
 top: getStyleNumValue(style, 'top'),
 borderLeft: getStyleNumValue(style, 'border-left-width'),
 borderTop: getStyleNumValue(style, 'border-top-width'),
 borderRight: getStyleNumValue(style, 'border-right-width'),
 borderBottom: getStyleNumValue(style, 'border-bottom-width'),
 deltX: e.pageX - rect.left,
 deltY: e.pageY - rect.top,
 startX: rect.left,
 startY: rect.top
 }
 if (el.id.indexOf(THSIGN) > -1 || el.id.indexOf(TDSIGN) > -1) {
 let table = document.getElementById(el.id.split(SEPARATOR)[0])
 tableStyle = window.getComputedStyle(table)
 data.left = getStyleNumValue(tableStyle, 'left')
 data.top = getStyleNumValue(tableStyle, 'top')
 }

 document.onmousemove = edom => {
 if (edom.ctrlKey) return
 if (isResize) {
 data.width = Math.round(edom.pageX - data.startX + data.borderLeft + data.borderRight)
 data.height = Math.round(edom.pageY - data.startY + data.borderBottom + data.borderTop)
 }
 // 处理组件 移动
 if (isMove && cfg.canDrag && (cfg.active || cfg.multiSelect)) {
 let targetPageX = edom.pageX
 let targetPageY = edom.pageY
 let deltX = targetPageX - data.startX - data.deltX
 let deltY = targetPageY - data.startY - data.deltY
 let newLeft = Math.round(getStyleNumValue(style, 'left') || '0', 10) + deltX
 let newTop = Math.round(getStyleNumValue(style, 'top') || '0', 10) + deltY
 data.left = Math.round(newLeft)
 data.top = Math.round(newTop)
 data.startX = data.startX + deltX
 data.startY = data.startY + deltY
 setConstraint(data)
 if (el.id.indexOf(THSIGN) > -1 || el.id.indexOf(TDSIGN) > -1) {
  let newLeft = Math.round(getStyleNumValue(tableStyle, 'left') || '0', 10) + deltX
  let newTop = Math.round(getStyleNumValue(tableStyle, 'top') || '0', 10) + deltY
  data.left = Math.round(newLeft)
  data.top = Math.round(newTop)
 }
 }
 if (cfg.multiSelect) {
 let domData = {
  el: clickId,
  x: edom.pageX,
  y: edom.pageY
 }
 // 移动多个元素时发送事件 bindUpdateDoms
 el.dispatchEvent(new CustomEvent('bindUpdateDoms', { detail: domData }))
 } else {
 // 移动单个元素移动时发送事件 bindUpdate
 el.dispatchEvent(new CustomEvent('bindUpdate', { detail: data }))
 }

 document.onmouseup = edom => {
 if (cfg.multiSelect && posData.x != edom.pageX && posData.y != edom.pageY) {
  let domData = {
  x: edom.pageX,
  y: edom.pageY
  }
  // 发送下面2个事件主要是为了实现操作的撤销和恢复功能，浏览器保存一个执行栈，一个移动表示一个事件
  // 多个元素同时移动时发送事件 bindFinishMoveDoms
  el.dispatchEvent(new CustomEvent('bindFinishMoveDoms', { detail: domData }))
 } else if (posData.x != edom.pageX && posData.y != edom.pageY) {
  // 单个元素同时移动时发送事件 bindFinishMove
  el.dispatchEvent(new CustomEvent('bindFinishMove', { detail: data }))
 }
 document.body.style.cursor = ''
 document.onmousemove = null
 document.onmouseup = null
 isMove = false
 }
 }

 document.onmouseup = edom => {
 document.body.style.cursor = ''
 document.onmousemove = null
 document.onmouseup = null
 isMove = false
 }
 }
})

2.自定义事件

在vue组件使用自定义指令并添加事件监听器

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-dragx="{ dragBarClass: 'drag', dragContainerId: 'page', multiSelect, active }"
 @bindUpdate="bindUpdate"
 @bindActive="activeDom"
 @bindUpdateDoms="bindUpdateDoms"
 @bindFinishMove="pushStackByDom"
 @bindFinishMoveDoms="pushStackByDoms"
 :style="style"
 :id="uId"
 class="drag-wrap">
</div>

// 添加一个适当的事件监听器
<div @bindUpdate="bindUpdate" />

// 创建并分发事件
el.dispatchEvent(new CustomEvent('bindUpdate', { detail: data }))

字段说明

vue使用自定义指令实现拖拽 - 文章图片

<template>
 <div v-dragx="{ dragBarClass: 'drag', dragContainerId: 'page', multiSelect, active }"
 @bindUpdate="bindUpdate"
 @bindActive="activeDom"
 @bindUpdateDoms="bindUpdateDoms"
 @bindFinishMove="pushStackByDom"
 @bindFinishMoveDoms="pushStackByDoms"
 :style="style"
 :id="uId"
 class="drag-wrap">
 <slot></slot>
 <span class="iconfont icon-icon-resize"></span>
 </div>
</template>
<script>
export default {
 data () {
 return {
 prevSize: {}
 }
 },
 props: {
 item: {
 type: Object,
 default: () => ({})
 },
 isVariable: {
 type: Boolean,
 default: false
 },
 active: {
 type: Boolean,
 default: false
 },
 size: {
 type: Object,
 default: () => ({
 x: 200,
 y: 200,
 w: 200,
 h: 24
 })
 },
 multiSelect: {
 type: Boolean,
 default: false
 },
 uId: {
 type: String,
 required: true
 },
 dragContainerId: {
 type: String
 }
 },
 computed: {
 style: function () {
 return {
 top: this.size.y + 'px',
 left: this.size.x + 'px',
 width: this.size.w + 'px',
 height: this.size.h + 'px'
 }
 }
 },
 methods: {
 activeDom (e) {
 this.$emit('activated', this.uId, e.detail.x, e.detail.y)
 this.prevSize = {
 ...this.size
 }
 },
 bindUpdate (event) {
 let data = event.detail
 this.size.x = data.left
 this.size.y = data.top

 this.$store.dispatch('RESIZE_ID', { id: this.uId, ...data })
 this.$emit('resizing', { ...data })
 },
 bindUpdateDoms (e) {
 this.$emit('movingDoms', e.detail)
 },
 pushStackByDom (e) {
 this.$store.dispatch('RESIZE_ID', { prevSize: this.prevSize, id: this.uId, ...event.detail })
 },
 pushStackByDoms (e) {
 this.$emit('finishMoveDoms', e.detail)
 }
 }
}
</script>
<style scoped>
.drag {
 background-color: #ccc;
 border-top: solid 1px rgba(33, 61, 223, 0.541);
 border-bottom: solid 1px rgba(33, 61, 223, 0.541);
}
.drag-wrap {
 position: absolute;
}
.icon-icon-resize {
 position: absolute;
 right: 0;
 bottom: 0;
 line-height: 12px;
 cursor: se-resize;
 font-size: 12px;
 color: #666;
}
</style>

3.vuex实现状态管理

因为涉及到多个组件的通信，因此使用vuex，把模板信息和执行栈全部保存在vuex中

最终实现的效果如下图所示

vue使用自定义指令实现拖拽 - 文章图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vue使用自定义指令实现拖拽全部内容，希望文章能够帮你解决vue使用自定义指令实现拖拽所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/330672.html

来源：【匿名】

【上一篇】VueJS 取得 URL 参数值的方法【下一篇】php怎么返回数据给vue

更多 ►

【vue使用自定义指令实现拖拽】教程文章相关的互联网学习教程文章

App.vue<template><div id="app"><h3>welcome vue-loading</h3><Loading></Loading>  </div></template>main.jsimport Vue from ‘vue‘ import App from ‘./App.vue‘import Loading from ‘./components/loading‘ //定义Loading,components、loading是一个文件夹，loading里面必须要index.jsVue.use(Loading) //use Loadingnew Vue({el: ‘#app‘,render: h => h(App) })index....

vue自定义指令v-focus失效之解决办法！【代码】【图】

注册组件代码如下： // 设置自定义指令v-focus directives: {// focus指令名称 focus: {inserted(el) {el.focus()},},}, 以上我是按照之前教学视频进行注册的自定义指令，但是失效。运行之后可以试着打印下el，看下值是什么：截图：通过截图可以看到返回的值是div，我们所以el并不是input而是他的父标签div。所以我们只需用querySelector获取到input再绑定即可。代码：// 设置局部指令v-focus directives: {// focus指令名称...

Vue之彻底理解自定义组件的v-model【代码】

最近在学习vue，今天看到自定义事件的表单输入组件，纠结了一会会然后恍然大悟...官方教程写得不是很详细，所以我决定总结一下。 v-model语法糖v-model实现了表单输入的双向绑定，我们一般是这么写的：1<div id="app">2<input v-model="price">3</div>1new Vue({ 2 el: ‘#app‘, 3 data: { 4 price: ‘‘ 5 } 6 });通过该语句实现price变量与输入值双向绑定实际上v-model只是一个语法糖，真正的实现是这样的：...

Vue 自定义按键修饰符，自定义指令，自定义过滤器【代码】

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<link rel="stylesheet" type="text/css" href="./css/bootstrap.css"/> 7<script src="../vue.js" type="text/javascript" charset="utf-8"></script> 8</head> 9<body> 10<div id="app"> 11 12<div class="panel panel-primary"> 13<div class="panel-heading"> 14<h3 class="panel-title">demo</h3> 15</div> 16<div class="panel-body fo...

vue之自定义组件【图】

组件（Component）是我的理解就是自定义元素.(一)自定义组件任何一个以.vue结尾的组件内都可以写自定义组件,一个自定义组件的使用主要2个步骤:1.注册:上代码2.组件使用原文：http://www.cnblogs.com/gutianer/p/7827055.html

Vue 开发自定义插件学习记录 -- 入门【代码】

首先，你需要了解插件实现的基本原理插件基本原理：我们都知道用Vue.use注册插件，那你知道Vue.use(plugin) 干了什么？以下是我对Vue官网的一些摘录和个人的理解 Vue.use( plugin ) 参数：{Object | Function} plugin 用法：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当...

vue 里面日历能够自定义价格。【代码】

cell-month 组件<template><div class="cell-month"><div class="weeklist"><div class="week_box"><p v-for="(item,index) in weekData">{{item}}</p></div><slot slot="select_month"></slot><div class="monthDayList"><divv-for="(item,index) in daysData" class="dayList"@click="selectDate(item,index)":class="{selectDay:isSelect == index,unData:item.day == ‘ ‘}...

vue 自定义指令的使用案例【代码】

参考资料：1. vue 自定义指令；2. vue 自定义指令实现 v-loading；　　v-loading，是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令，项目中也很少需要自己去写自定以指令。碰巧这段时间自己练习了编写组件，完成看看能不能实现一个自定义的这样一个指令。话不多说，上代码：<div class="table" v-loadAnimation="loading">... </div><script> export default {data() {return {...}},directives: {loadAnimation: ...

vue自定义指令有什么用，又用在哪里？【代码】【图】

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。在vue中，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name：<template><div class="hello"><div v-test=‘na...

vue之自定义组件的写法与用法【代码】【图】

三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美...

vue Element-ui 表格自带筛选框自定义高度【代码】【图】

el-table中可以在一行的某列进行筛选，代码如下： <el-table-column prop="classOfTest" class="test" label="测试类名" :filters="classList" filter-placement="bottom-start" width="300" column-key="testOfClass"></el-table-column>其中 filters 就是筛选列表，格式为 classList = [{text: ‘Test_配电箱自动识别‘, value: ‘Test_配电箱自动识别‘},{text: ‘Test_门自动识别‘, value: ‘Test_门自动识别‘},……]filter-...

小tips：使用vuecli2脚手架配置vant自定义主题【代码】

一：工程安装less、less-loader配置版本如下： "devDependencies": {"less": "^3.0.4","less-loader": "^5.0.0",/**其它配置*/ } 二：在main.js中引入vant的less文件import ‘vant/lib/index.less‘三：创建自定义主题变量文件less如下比如，resetui.less:@blue: #2897ff;四：修改配置文件中的utils.js代码原代码：return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders(‘less‘),sass: generateL...

vue自定义指令directive【图】

vue中指令分为全局指令和局部指令先来看全局自定义指令：第一个参数是指令的名字，第二个参数可以是函数也可以是对象，先来看函数：函数中接收三个参数：el在这里是input元素bindings里是一些绑定信息：其中expression是指绑定的变量名字，这里是contentname是指令名字value是绑定数据的值，上面content为空，所以目前value为空 v-slice上还可以写修饰符还可以传参：vnode虚拟节点：vnode中contex是vue实例，其中的content是vue中的...

[转] vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template><script> export default { }</script><style scoped> div{ font-size:40px; color:#fbb; text-align:center; }</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来...

Vue.use自定义自己的全局组件【代码】【图】

通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。这里我用的webpack-simple这个简单版本的脚手架为例，安装就不啰嗦了，直接进入正题首先看下目前的项目结构：webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明import Vue from ‘vue‘ import App from ‘./App.vue‘// 引入element-ui组件 impor...

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 条件语句 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / vue使用自定义指令实现拖拽

vue使用自定义指令实现拖拽

内容导读

内容图文

内容总结

内容备注

内容手机端

【vue使用自定义指令实现拖拽】教程文章相关的互联网学习教程文章

vue.2.0-自定义全局组件【代码】

vue自定义指令v-focus失效之解决办法！【代码】【图】

Vue之彻底理解自定义组件的v-model【代码】

Vue 自定义按键修饰符，自定义指令，自定义过滤器【代码】

vue之自定义组件【图】

Vue 开发自定义插件学习记录 -- 入门【代码】

vue 里面日历能够自定义价格。【代码】

vue 自定义指令的使用案例【代码】

vue自定义指令有什么用，又用在哪里？【代码】【图】

vue之自定义组件的写法与用法【代码】【图】

vue Element-ui 表格自带筛选框自定义高度【代码】【图】

小tips：使用vuecli2脚手架配置vant自定义主题【代码】

vue自定义指令directive【图】

[转] vue自定义组件(通过Vue.use()来使用)即install的使用

Vue.use自定义自己的全局组件【代码】【图】

VUE - 相关标签

自定义 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程