代码如下（示例）：创建js文件

//创建一个js文件 directive.js
import Vue from "vue";
Vue.directive("drag", {bind: function (el) {let odiv = el;odiv.style.position = "fixed";odiv.onmousedown = (e) => {let disX = e.clientX - odiv.offsetLeft;let disY = e.clientY - odiv.offsetTop;document.onmousemove = (e) => {let left = e.clientX - disX;let top = e.clientY - disY;odiv.style.left = left + "px";odiv.style.top = top + "px";};document.onmouseup = () => {document.onmousemove = null;document.onmouseup = null;};};},
});

2.main.js引入

import './view/sm/directive'

3.在需要的盒子上加入v-drag

  <div v-drag></div>

vue实现盒子的拖拽移动相关推荐

Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版类似 Tinder 和探探的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...
vue+sortable实现表格拖拽
vue+sortable实现表格拖拽前言: 支持 vue3.0 支持表格拖拽支持自定义拖拽 sortable官网一.下载 sortable npm install sortablejs --sa ...
Vue+el-tree，元素拖拽时出现禁用图标，请看解决办法
项目需求:vue+el-tree实现节点拖拽到指定div播放视频: 问题:当节点拖拽时, 出现禁用图标: 一开始以为将禁用图标改变样式或隐藏就可以,一番尝试后, 发现这个图标可能是浏览器默认的, 经过 ...
基于 Spring Boot + Vue 实现的可视化拖拽编辑的大屏项目
大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目: 简介这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑 ...
Vue3 + Ant Design Vue Modal 对话框可拖拽指令
1.html部分 <div v-dialogDrag id="modalBox"><a-modalv-model:visible="visible&qu ...
【Vue版】实现拖拽、排序效果（注意，这个方法在chrome谷歌浏览器上面不适用，dragend会情不自禁触发drag事件先执行，有点像浏览器的一个bug）
<divclass='dragged':index="$index"draggable='true'@dragstart="dragstart"@drag ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
npm 可视化html编辑器,超给力 Vue.js 可视化H5拖拽编辑器Quark-H5
前两天有分享一个鲁班H5移动端页面生成器.今天再给大家推荐一款超优秀的Vue H5可视化布局编辑器QuarkH5. quark-h5 基于 vue.js 开源的H5可视化拖放编辑器,star高达1.7 ...

vue实现盒子的拖拽移动

2.main.js引入

3.在需要的盒子上加入v-drag

vue实现盒子的拖拽移动相关推荐

最新文章

热门文章