vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；

vue项目：点击拖拽盒子；移动盒子；

代码可直接复制：（注意需要在移动的盒子上添加 v-指令注意采用固定定位）

<template><div class="far_box"><div>{{ msg }}</div><!-- v-drag指令 --><div v-drag class="move_box">目标盒子</div></div></template><script>
export default {// 指令directives: {drag (el) {// console.log('el', el)// 鼠标移动到目标盒子上--监听鼠标按下事件el.onmousedown = function (e) {// console.log('e1', e)// 计算出此时点击目标盒子 相对于自己的左上角距离（目的是为了下方位移时候 赋值减去相应的自己左上角位置 保证盒子定位点还是自己点击的点 而不是左上角点）// vue项目对于原生的dom操作 其实就是在方法内 也就是js内 使用原生的方法对元素进行dom操作 和普通的js操作一样var disx = e.offsetXvar disy = e.offsetYdocument.onmousemove = function (e2) {var move_box = document.getElementsByClassName('move_box')[0]move_box.style.position = 'fixed'move_box.style.left = e2.clientX - disx + 'px'move_box.style.top = e2.clientY - disy + 'px'// console.log('最后的定位：', e2.clientX - disx, e2.clientY - disy, e2)}document.onmouseup = function () {document.onmousemove = document.onmouseup = null}}}},data () {return {msg: '其他盒子元素'}}}
</script>
<style lang="less" scope>
.far_box {.move_box {position: fixed;top: 0;left: 0;background-color: #1fff;width: 100px;height: 50px;line-height: 50px;}.move_box:active {background-color: #1f1f;}
}
</style>

vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；相关推荐

拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
Vue.js-Day03-AM【超级详细：Node.js环境安装、安装淘宝镜像（Win、Mac）、安装Vue脚手架、初始化Vue项目-命令解释（Vscode、命令行窗口）、目录介绍、Vue文件介绍】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Node.js-环境安装 1.1.Node.js-详细安装步骤 2.vue-cli脚手架安装 2.1.安装 ...
创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件（.vue，js代码等）
下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件一.引入elementUi 顺便一提axios使用说明和axios在vu ...
记录第一次成功将vue项目打包并部署到centos云服务器上并访问(包含多个vue项目部署nginx配置说明)
文章目录准备 vue项目打包配置服务器使用xshell 使用xftp 当项目更新时操作小结准备 vscode:用于打包vue项目(需要提前安装好node与npm,推荐使用mvn管理node, ...
vue拖拽盒子；vue移动
这里写目录标题通过directives指令实现vue实现盒子的移动 vue-draggable-resizable定制化可拖动控件通过directives指令实现vue实现盒子的移动 <di ...
vue 弹框 select 获取不到值_vue dialog弹框拖拽
问题&需求描述: 在项目中,使用vue的<el-dialog></el-dialog> 弹出的框,不能拖拽.现需使其可进行鼠标点击拖拽. 解决方案: 在 src/uti ...
vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用首先在使用的组件中引入 import draggable f ...
html5 list 拖拽排序,vue实现可拖拽排序的列表
在做友情链接管理功能的时候,考虑到有个对友情链接排序的需求,开始的时候我是在这个list 里边加了rank字段,用户需要手动输入rank ,点击保存后,后台通过用户输入的rank序号进行排序,这显然 ...

vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；

vue项目通过directives指令实现vue实现盒子的移动；vue拖拽盒子；vue移动；相关推荐

最新文章

热门文章