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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403502.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JSP邮箱信息截取

// 将前四位的显示替换成“****”&#xff0c;不足四位的全部替换成“****”。 function email() { var str1 "${sessionScope.gameUser.email}"; var str2 str1.split(""); var flag1 str2[0].length; var s…

SuperAgent 中文乱码星号问号问题

看到星号问号了么&#xff0c;SuperAgent 爬取时中文乱码星号&#xff0c;只有中文是乱码&#xff0c;其它都是对的&#xff0c;肯定需要转义&#xff0c;找了两个小时&#xff0c;最后度娘看到个帖子 https://cloud.tencent.com/developer/article/1445392试了试&#xff0c;…

括号匹配(二)

//C v0.01 不知题意&#xff0c;正在理解&#xff0c;正在&#xff08;一&#xff09;上修改。 #include <stdio.h> #include <string.h> #include <stdlib.h> #define STACK_SIZE 10000 typedef struct STACK{ char stack[STACK_SIZE]; int pointer; }STSTA…

linux 下安装mysql

第一&#xff1a;保证服务器下没安装过MYSQL 由于数据库版本不同&#xff0c;5.7与8.0的数据库命令的使用方式也有些差异 本地数据如果用的老版&#xff0c;服务器用的新版&#xff0c;比如datatime这种记录时间的字段会传输报错 开始安装&#xff1a; 下载mysql mysql 官…

制作 Windows8   to Go

制作 Windows to Go 将准备好的 Windows 8 的镜像文件&#xff08;ISO 格式&#xff09;加载到虚拟光驱中去&#xff1b;将准备好的 USB 存储设备插入&#xff1b;打开控制面板&#xff0c;点击“Windows To Go”&#xff1b;在接下来的选项中按照步骤提示选择对应的 Win 8 的镜…

vue监听浏览器刷新和关闭;

注意&#xff1a;区分不了浏览器是触发了刷新还是关闭&#xff0c;而且提示的弹框是无法自定义的&#xff1b;如果有大佬有方法能区分&#xff0c;还请评论学习一下&#xff01;感谢&#xff01; 代码可直接复制&#xff1a; <template><div><div /></di…

Linux 线程(1):线程概述

一、进程与程序的区别 程序是应用程序作为一个静态文件存储在计算机系统的硬盘等存储空间中&#xff0c;而进程则是处于动态条件下由操作系统维护的系统资源管理实体&#xff0c;也就是程序的动态执行过程。 二、进程与线程的区别 进程是系统中程序执行和资源分配的基本单位…

【年少的风】C#小学生算式×××2

测试面板对应的代码如下&#xff1a; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Data.OleDb; using System.Data.SqlClient; na…

计算文件的md5;vue计算文件md5值;计算图片的md5值;

github链接 1.先下载 npm i browser-md5-file -S2.在使用的vue页面引入和声明方法 import BMF from browser-md5-file const bmf new BMF()3.使用方法&#xff1a; function handle(e) {const file e.target.files[0];bmf.md5(file,(err, md5) > {console.log(err:, err);…

JS垃圾回收

JS本是一套全自动内存回收程序&#xff0c;当程序有不需要使用的数据时&#xff0c;JS会定期的回收&#xff0c;释放内存。 回收机制&#xff1a;标记回收 JS会自动回收标记为0的数据&#xff1b; 例&#xff1a;var a {}; &#xff08;表示a数据有被引用&#xff0c;数据…

nginx 非socket代理配置

nginx反向代理socket配置 1&#xff0c;安装 git clone https://github.com/yaoweibin/nginx_tcp_proxy_modulecd nginx-1.8.1patch -p1 < /root/to/nginx_tcp_proxy_module/tcp.patch./configure --prefix/usr/local/nginx --with-http_stub_status_module --with-http_per…

Xcode 如何使用旧版本SDK以保证程序兼容性

一、首先锁定 SDK 的目标位置&#xff0c;打开 Finder 找到应用程序 Xcode 右键选择打开包内容&#xff0c;之后进入到目录 Contents/Developer/Platforms &#xff0c;可以看到不同平台的 SDK 分类&#xff0c;根据开发平台进入相关目录即可&#xff0c;之后进入到子目录 Deve…

eslint关闭===替换==;eslint关闭全等于校验;eslint关闭==校验

在.eslintrc.js文件下 rules: { eqeqeq: off, }详细可看此篇eslint设置

【转】【天道酬勤】 腾讯、百度、网易游戏、华为Offer及笔经面经

面试完毕&#xff0c;已跟网易游戏签约。遂敲一份笔经面经&#xff0c;记录下面试经过。类似于用日记记录自己&#xff0c;同时希望对师弟师妹有一定帮助。不是炫耀&#xff0c;只是希望攒RP&#xff0c;希望各位不要鄙视我。正所谓“饮水思源”。小弟来自广州华南理工大学&…

VIM常用基本命令

<1> vim 在命令行中输入vim,进入vim编辑器 <2> i,a,o 编辑按键&#xff0c;按下后下端显示 –INSERT– 插入命令&#xff1a; i键–从当前位置开始编辑&#xff1b; a键–从当前光标的下一个字符位置开始编辑&#xff1b; o键–从当前光标的下一行首开始编辑…

函数IIFE(匿名函数)

function init() {}init();init null; 上面是麻烦写法 IIFE&#xff08;Immediately-invoked function expression&#xff09;立即执行函数&#xff0c;执行后会直接被清理掉&#xff1b; 简单写法&#xff0c;也就是匿名函数&#xff1b; (function (ctr) {console.log(c…

codevs 1028 花店橱窗布置 (KM)

/*裸地KM*/ #include<iostream> #include<cstdio> #include<cstring> #define maxn 110 #define inf 0x3f3f3f3f using namespace std; int n,m,ans,match[maxn],w[maxn][maxn],d; int fx[maxn],fy[maxn],lx[maxn],ly[maxn]; bool Dfs(int i) {fx[i]1;for(in…

eslint常用设置;eslint关闭驼峰命名;eslint关闭全等于===校验;eslint关闭未定义变量报错;eslint关闭声明后未使用变量报错;eslint关闭单闭合标签校验;

详细配置eslint操作可看此篇 eslint各种限制规则可看此篇 在 .eslintrc.js 文件修改规则&#xff1a;0关闭 1警告 2报错 module.exports {root: true,parserOptions: {parser: babel-eslint,sourceType: module},env: {browser: true,node: true,es6: true,},extends: [plu…

linux 进程开始与终止

exit(0) 表示程序正常退出&#xff1b; exit(1)/exit(-1) 表示程序异常退出&#xff1b; exit() 结束当前进程/当前程序/&#xff0c;在整个程序中&#xff0c;只要被调用就结束&#xff0c;返回参数值&#xff1b; return() 是当前函数返回&#xff0c;当然如果是在主函数m…

类的友元

{ public:CBottle(double height, double diameter){m_Height height;m_Diameter diameter;}friend CCarton::CCarton(const CBottle& aBottle); private:double m_Height;double m_Diameter;//这是定义友元函数的模式 }; CCarton::CCarton(const CBottle& aBottle) …