vue 限制在指定容器内可拖拽的div

在这里插入图片描述

<template><div class="container" id="container"><div class="drag-box center" v-drag v-if="isShowDrag"><div>无法拖拽出容器的div浮窗</div></div></div>
</template><script>
export default {data() {return {isShowDrag: true,};},//自定义指令directives: {drag: {// 指令的定义bind: function (drag_dom) {drag_dom.onmousedown = (e) => {// 按下鼠标时,鼠标相对于被拖拽元素的坐标let disX = e.clientX - drag_dom.offsetLeft;let disY = e.clientY - drag_dom.offsetTop;// 获取容器domlet container_dom = document.getElementById("container");document.onmousemove = (e) => {// 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置let left = e.clientX - disX;let top = e.clientY - disY;// 在容器范围内移动时,被拖拽元素的最大left值let leftMax =container_dom.offsetLeft +(container_dom.clientWidth - drag_dom.clientWidth);// 在容器范围内移动时,被拖拽元素的最小left值let leftMin = container_dom.offsetLeft + 1; //此处+1为容器的边框1pxif (left > leftMax) {drag_dom.style.left = leftMax + "px";} else if (left < leftMin) {drag_dom.style.left = leftMin + "px";} else {drag_dom.style.left = left + "px";}// 在容器范围内移动时,被拖拽元素的最大left值let topMax =container_dom.offsetTop +(container_dom.clientHeight - drag_dom.clientHeight);// 在容器范围内移动时,被拖拽元素的最小left值let topMin = container_dom.offsetTop + 1; //此处+1为容器的边框1pxif (top > topMax) {drag_dom.style.top = topMax + "px";} else if (top < topMin) {drag_dom.style.top = leftMin + "px";} else {drag_dom.style.top = top + "px";}};document.onmouseup = () => {document.onmousemove = null;document.onmouseup = null;};};},},},
};
</script><style lang="scss" scoped>
.drag-box {position: absolute;top: 100px;left: 100px;width: 300px;height: 100px;background: #fff;border-radius: 5px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);padding: 10px;// 改变鼠标样式为移动图标cursor: move;// 禁止文字被选中user-select: none;
}.container {border: 1px solid red;width: 600px;height: 300px;margin: 30px;
}.center {display: flex;justify-content: center;align-items: center;
}
</style>

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

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

相关文章

P11 Linux进程编程exec族函数

前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《Linux C应用编程&#xff08;概念类&#xff09;_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f6f8;推荐专栏3: ​​​​​​《链表_C…

Java 简易版 UDP 多人聊天室

服务端 import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{public static ServerSocket server_socket;public static ArrayList<Socket> socketListnew ArrayList<Socket>(); public static void main(String []args){try{…

算法通关村第五关—LRU的设计与实现(黄金)

LRU的设计与实现 一、理解LRU的原理 LeetCode146:运用你所掌握的数据结构&#xff0c;设计和实现一个LRU(最近最少使用)缓存机制 实现LRUCache类&#xff1a; LRUCache(int capacity) 以正整数作为容量capacity初始化 LRU 缓存 int get(int key) 如果关键字key存在于缓存中&a…

数据可视化|jupyter notebook运行pyecharts,无法正常显示“可视化图形”,怎么解决?

前言 本文是该专栏的第39篇,后面会持续分享python数据分析的干货知识,记得关注。 相信有些同学在本地使用jupyter notebook运行pyecharts的时候,在代码没有任何异常的情况下,无论是html还是notebook区域,都无法显示“可视化图形”,界面区域只有空白一片。遇到这种情况,…

SQL(COALESCE)

zstarling 非空值查找及替换COALESCE 非空值查找及替换COALESCE 新语法SQL COALESCE(staff_no,staff_no1,)详解 在SQL中&#xff0c;COALESCE函数用于返回一组表达式中的第一个非NULL值。它接受两个或多个参数&#xff0c;并按参数顺序依次判断每个参数是否为NULL&#xff0c…

如何才能保证绩效考核的有效性呢?

绩效管理是现代人力资源管理的核心&#xff0c;做好绩效考核是做好绩效管理的重要手段。但企业绩效考核的设计往往缺乏针对性和科学性&#xff0c;绩效考核工作也常常停留在形式上&#xff0c;最终没能为提高组织效率提供帮助&#xff0c;还消耗员工与管理者的时间、精力。于是…

Nginx服务优化以及防盗链

1. 隐藏版本号 以在 CentOS 中使用命令 curl -I http://192.168.66.10 显示响应报文首部信息。 查看版本号 curl -I http://192.168.66.10 1. 修改配置文件 vim /usr/local/nginx/conf/nginx.conf http {include mime.types;default_type application/octet-stream;…

京东数据运营(京东API接口):10月投影仪店铺数据分析

鲸参谋监测的京东平台10月份投影仪市场销售数据已出炉&#xff01; 10月份&#xff0c;环同比来看&#xff0c;投影仪市场销售均上涨。鲸参谋数据显示&#xff0c;今年10月&#xff0c;京东平台投影仪的销量为16万&#xff0c;环比增长约22%&#xff0c;同比增长约8%&#xff1…

鸿蒙应用开发ArkTS基础组件的使用

语雀知识库地址&#xff1a;语雀HarmonyOS知识库 飞书知识库地址&#xff1a;飞书HarmonyOS知识库 本文示例代码地址&#xff1a;Gitee 仓库地址 嗨&#xff0c;各位好呀&#xff0c;我是小白 上一篇文章我为大家介绍了如何使用 ArkTS 开发鸿蒙应用&#xff0c;对 HarmonyOS 项…

大文件分割,合并------C++ ------fstream

将一个大文件(这里测试文件为5.2G)切分为指定大小的文件,然后在把分割后的文件拼接合并为分割前的源文件 #include <boost/timer.hpp> // 计时函数#include <filesystem> #include <fstream> #include <vector> // 分隔后文件夹的格式, 原文件名_chun…

探索开源游戏的乐趣与无限可能 | 开源专题 No.47

CleverRaven/Cataclysm-DDA Stars: 9.0k License: NOASSERTION Cataclysm&#xff1a;Dark Days Ahead 是一个回合制的生存游戏&#xff0c;设定在一个后启示录世界中。尽管有些人将其描述为 “僵尸游戏”&#xff0c;但 Cataclysm 远不止于此。在这个残酷、持久、程序生成的世…

【原创】【一类问题的通法】【真题+李6卷6+李4卷4(+李6卷5)分析】合同矩阵A B有PTAP=B,求可逆阵P的策略

【铺垫】二次型做的变换与相应二次型矩阵的对应&#xff1a;二次型f&#xff08;x1&#xff0c;x2&#xff0c;x3&#xff09;xTAx&#xff0c;g&#xff08;y1&#xff0c;y2&#xff0c;y3&#xff09;yTBy ①若f在可逆变换xPy下化为g&#xff0c;即P为可逆阵&#xff0c;有P…

Unity 通过键盘鼠标控制物体移动、旋转、缩放的方法

在Unity中&#xff0c;使用键盘ADWS键控制物体移动&#xff0c;通过鼠标左键控制物体旋转&#xff0c;鼠标中键控制物体缩放是再常见不过的方法。 方法如下&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;public class MoveCo…

数字系统设计(EDA)实验报告【出租车计价器】

一、问题描述 题目九&#xff1a;出租车计价器设计&#xff08;平台实现&#xff09;★★ 完成简易出租车计价器设计&#xff0c;选做停车等待计价功能。 1、基本功能&#xff1a; &#xff08;1&#xff09;起步8元/3km&#xff0c;此后2元/km&#xff1b; &#xff08;2…

红队攻防实战之ThinkPHP-RCE集锦

你若不勇敢&#xff0c;谁又可以替你坚强&#xff1f; ThinkPHP 2.x RCE漏洞 1、查询phpinfo() 2、任意代码执行 3、Getshell 蚁剑连接&#xff1a; ThinkPHP5 5.0.23 RCE漏洞 发送数据包&#xff1a; 成功执行id命令&#xff1a; 工具验证 ThinkPHP5 SQL注入漏洞 &&am…

什么是神经网络的非线性

大家好啊&#xff0c;我是董董灿。 最近在写《计算机视觉入门与调优》&#xff08;右键&#xff0c;在新窗口中打开链接&#xff09;的小册&#xff0c;其中一部分说到激活函数的时候&#xff0c;谈到了神经网络的非线性问题。 今天就一起来看看&#xff0c;为什么神经网络需…

cuda函数的前缀作用

文章目录 cuda函数的前缀作用1、前缀作用2、global3、device4、host cuda函数的前缀作用 1、前缀作用 函数执行环境标识符&#xff0c;即表明函数在哪里被调用 2、global __global__修饰的函数是核函数&#xff0c;这些函数在GPU上执行&#xff0c;但是需要在CPU上调用。 g…

激光打标机在智能手表上的应用:科技与时尚的完美结合

随着科技的飞速发展&#xff0c;智能手表已经成为我们日常生活中不可或缺的智能设备。而在智能手表制造中&#xff0c;激光打标机扮演着至关重要的角色。本文将详细介绍激光打标机在智能手表制造中的应用&#xff0c;以及其带来的优势和影响。 ​ 一、激光打标机在智能手表制…

按订单周期结算的产品成本

原文地址&#xff1a;Product Cost By Order Cycle | SAP Blogs 产品成本核算是每个制造企业的控制部门的核心职责之一&#xff0c;根据其产品和生产的性质&#xff0c;每个企业的成本核算有所不同。它支持组织在其他职能领域做出大量战略决策。在过去几年中获得了 SAP 产品成本…

Vite4、Vue3、Axios 针对请求模块化封装搭配自动化导入(简单易用)

针对请求模块化封装搭配自动化导入&#xff08;简单易用&#xff09; 目标目录目标代码前提步入正题src / utils / index.jssrc /api / index.jssrc /api / request.jssrc /api / service.jssrc /api / utils.jssrc /api / modules / demo.js 自动化配置vite.config.jseslint 校…