通过directives指令实现vue实现盒子的移动

<divclass="controlMarkerShowOrHidden"v-drag
></div>
``
//页面直接写
directives: {drag: {// 指令的定义bind: function(el) {let odiv = el; //获取当前元素// 鼠标移动到目标盒子上--监听鼠标按下事件el.onmousedown = e => {//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeft;let disY = e.clientY - odiv.offsetTop;let left = "";let top = "";document.onmousemove = e => {//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置left = e.clientX - disX;top = e.clientY - disY;//绑定元素位置到positionX和positionY上面//移动当前元素odiv.style.left = left + "px";odiv.style.top = top + "px";};document.onmouseup = e => {document.onmousemove = null;document.onmouseup = null;};};}}},
//main.js注册全局drag
Vue.directive('drag', {inserted:function(el){let odiv = el; //获取当前元素el.onmousedown = e => {//算出鼠标相对元素的位置let disX = e.clientX - odiv.offsetLeft;let disY = e.clientY - odiv.offsetTop;let left = "";let top = "";document.onmousemove = e => {//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置left = e.clientX - disX;top = e.clientY - disY;//绑定元素位置到positionX和positionY上面//移动当前元素odiv.style.left = left + "px";odiv.style.top = top + "px";};document.onmouseup = e => {document.onmousemove = null;document.onmouseup = null;};};}
})

vue-draggable-resizable定制化可拖动控件

> npm i vue-draggable-resizable -S
>// main.js引用 并全局注册
> import VueDraggableResizable from 'vue-draggable-resizable'
> import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
> Vue.component('vue-draggable-resizable', VueDraggableResizable)

//直接引用<vue-draggable-resizable:w="dragStyles.w":h="dragStyles.h":min-width="250":min-height="290":max-width="1900":max-height="1000":parent="false":active="true":x="dragStyles.x":y="dragStyles.y":z="998"id="drag-data-table"class-name="drag-data-table-panel"class-name-handle="my-handle-class"@resizing="onResize"@dragging="onDrag"></vue-draggable-resizable>

:w 默认宽度
:h 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素
class-name 自定义组件class @dragging="onDrag"  每当拖动组件时调用。
@resizing="onResize" 每当组件调整大小时调用。
@dragstop="onDragstop" 每当组件停止拖动时调用。
@resizestop="onResizstop" 每当组件停止调整大小时调用
@deactivated="onDeactivated" 每当用户单击组件外的任何位置时调用
@activated="onActivated" 单击组件时调用，以显示句柄。备注：句柄就是点击组件后上下左右的可以拉伸的方块点

vue拖拽盒子；vue移动相关推荐

vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；
vue项目:点击拖拽盒子:移动盒子: 代码可直接复制:(注意需要在移动的盒子上添加 v-指令注意采用固定定位) <template><div class="far_box ...
VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性属性名称说明 group :gr ...
vue 拖拽元素到任意位置
vue 拖拽元素到任意位置使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
vue 拖拽产生连线_dragUI
dragUI 文档目录用于UNI可拖拽可视化编程在线演示 demo地址一个简单创建hello world 界面的视频,github不会放视频,放在bilibli了 dragUI 演示视频效果图 ...
vue拖拽实现app或小程序装修界面
vue拖拽实现app或小程序装修一.最终效果图参考引用作者:作者:李白不吃茶v 原作者源代码git地址:大神的源代码这里是引用二.需要安装的依赖安装:vuedraggable 语法:npm ...
vue拖拽效果（适用范围自定义表单，电子合同签章等）
vue拖拽效果实现实现原因之前项目需求做一个自定义拖拽控件,进行自定义表单生成以及电子合同签字盖章,总结一下思路. 实现思路首先需要可以拖拽的控件, 鼠标长按拖拽到拖拽存放区后,松开鼠标拖拽存放 ...

vue拖拽盒子；vue移动

这里写目录标题

通过directives指令实现vue实现盒子的移动

vue-draggable-resizable定制化可拖动控件

vue拖拽盒子；vue移动相关推荐

最新文章

热门文章