jq弹窗拖动改变宽高

预览效果

在这里插入图片描述

<div class='tishiMask'><div class="tishiEm"><div id="coor"></div><div class="topNew ismove"><span class="ismove">提示</span><p onclick="closeTishi()">×</p></div><div class="bottomNew"><p>提示文字软件</p><div class="newDesignBtn"><input type="button" value="确定" class="btnLeft" onclick="closeTishi()" ><input type="button" value="取消" onclick="closeTishi(this)" class="btnRight"></div></div></div>
</div>
.tishiMask{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, .18);display: block;z-index: 99999;
}
.tishiEm {z-index: 99999;/* display: none; *//* -webkit-transition: -webkit-box-shadow .2s; *//* transition: box-shadow .2s; */position: fixed;height: 220px;width: 300px;top: 38%;/* margin-top: -100px; */left: 43%;/* margin-left: -150px; */background: #fff;border-radius: 5px 5px 0px 0px;-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);/* -webkit-transition: -webkit-box-shadow .2s; *//* transition: box-shadow .2s; *//* transition: all .4s; *//* -webkit-transition: all .4s; *//* -moz-transition: all .4s; */
}.tishiEm .topNew {overflow: hidden;background-image: linear-gradient(183deg, #3d95ea 0%, #70b0e6 100%);border-radius: 5px 5px 0px 0px;
}.tishiEm .topNew span {color: #fff;font-size: 12px;height: 34px;line-height: 34px;display: block;float: left;margin-left: 10px;
}.tishiEm .topNew p {float: right;color: #fff;font-size: 20px;height: 34px;line-height: 34px;display: block;margin-right: 10px;cursor: pointer;
}.tishiEm .bottomNew {margin: 0px 0px;
}.tishiEm .bottomNew {text-align: center;
}.tishiEm .bottomNew p {font-size: 12px;height: 20px;line-height: 20px;
}
.tishiEm .bottomNew .newDesignBtn {overflow: hidden;width: 100%;height: auto;display: flex;justify-content: flex-end;align-items: center;position: absolute;bottom: 10px;left: 0;
}.tishiEm .bottomNew .newDesignBtn .btnLeft {display: block;float: left;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);background: #5da2e5;color: #fff;font-size: 12px;width: auto;text-align: center;height: 24px;line-height: 24px;border-radius: 4px;border: none;cursor: pointer;padding: 0px 14px;border: 1px solid #5da2e5;
}.tishiEm .bottomNew .newDesignBtn .btnLeft:hover {background: #1a78d9;border: 1px solid #0069b8;color: #fff;
}.tishiEm .bottomNew .newDesignBtn .btnRight {display: block;float: left;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.22);background: #dcdcdc;color: #383838;font-size: 12px;width: auto;text-align: center;height: 24px;line-height: 24px;border-radius: 4px;margin-right: 28px;margin-left: 10px;border: none;cursor: pointer;padding: 0px 14px;border: 1px solid #dcdcdc;
}.tishiEm .bottomNew .newDesignBtn .btnRight:hover {background: #c4c4c4;color: #383838;border: 1px solid #aaa;
}
#coor, #coor_set, #coor_syt {width: 20px;height: 20px;overflow: hidden;cursor: se-resize;position: absolute;right: 0;bottom: 0;/* background-color: #09c; */background: url(./../images/scale.png);background-size: 100% 100%;transform: rotate(270deg);z-index: 999;
}

类名tishiEm设置宽高为缩小最小宽高。

注意下方js注释

$(function () {$(document).mousemove(function (e) {if (!!this.move_gy) {var posix_gy = !document.move_target_gy ? { 'x': 0, 'y': 0 } : document.move_target_gy.posix_gy,callback_gy = document.call_down_gy || function () {let viewWidth = $(document).width();let maxLeft = viewWidth - $(".tishiEm").width();   // 左侧最大移动量let viewHeight = $(document).height();let maxHeight = viewHeight - $(".tishiEm").height();   // 底部最大移动量let currentTop = e.pageY - posix_gy.y;let currentLeft = e.pageX - posix_gy.x;if (currentTop <= 0 || currentLeft <= 0 || currentLeft >= maxLeft || currentTop >= maxHeight) {return} else {$(this.move_target_gy).offset({'top': currentTop,'left': currentLeft});}};callback_gy.call(this, e, posix_gy);}}).mouseup(function (e) {if (!!this.move_gy) {var callback_gy = document.call_up_gy || function () {};callback_gy.call(this, e);$.extend(this, {'move_gy': false,'move_target_gy': null,'call_down_gy': false,'call_up_gy': false});}});var $box = $('.tishiEm').mousedown(function (e) {let offset = $(this).offset();this.posix_gy = { 'x': e.pageX - offset.left, 'y': e.pageY - offset.top };if (!$(e.target).hasClass('ismove')) {      // 只允许蓝色区域可拖动return;} else {$.extend(document, { 'move_gy': true, 'move_target_gy': this });}}).on('mousedown', '#coor', function (e) {var posix_gy = {'w': $box.width(),'h': $box.height(),'x': e.pageX,'y': e.pageY};$.extend(document, {'move_gy': true, 'call_down_gy': function (e) {//下方为最小宽高  同步上方css$box.css({'width': Math.max(300, e.pageX - posix_gy.x + posix_gy.w),'height': Math.max(220, e.pageY - posix_gy.y + posix_gy.h)});}});return false;});
});

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

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

相关文章

vue3中css使用script中定义的变量

代码 <template><div class"box">haha</div> </template><script setup lang"ts"> const boxWidth 500px </script><style lang"scss"> .box {width: v-bind(boxWidth);height: 200px;background-c…

JVM的内存分配及垃圾回收

内存分配 在了解Java的内存管理前&#xff0c;需要知道JVM中的内存分配。 栈 存储局部变量。在方法的定义中或在方法中声明的变量为局部变量&#xff1b;栈内存中的数据在该方法结束&#xff08;返回或抛出异常或方法体运行到最后&#xff09;时自动释放栈中存放的数据结构为…

9、DVWA——XSS(Stored)

文章目录 一、存储型XSS概述二、low2.1 源码分析2.2 通关分析 三、medium3.1 源码分析3.2 通关思路 四、high4.1 源码分析4.2 通关思路 一、存储型XSS概述 XSS&#xff0c;全称Cross Site Scripting&#xff0c;即跨站脚本攻击&#xff0c;某种意义上也是一种注入攻击&#xff…

Webpack使用output配置打包代码信息和自动清理打包目录

一、修改代码打包后的文件名 二、自动清理打包目录 如果我们将打包文件名修改再进行打包&#xff0c;会发现之前不同名的打包文件会进行保留 在output对象中配置clean属性可自动清理打包目录 三、指定打包文件的目录 四、指定多个打包文件文件名

leetcode 817. 链表组件(java)

链表组件 题目描述HashSet 模拟 题目描述 给定链表头结点 head&#xff0c;该链表上的每个结点都有一个 唯一的整型值 。同时给定列表 nums&#xff0c;该列表是上述链表中整型值的一个子集。 返回列表 nums 中组件的个数&#xff0c;这里对组件的定义为&#xff1a;链表中一段…

测试行业面临的问题及RunnerGo在工具层面如何解决的

RunnerGo致力于打造成一款企业级全栈测试平台&#xff0c;旨在实现产品生命周期的闭环管理&#xff0c;帮助企业在整个产品生命周期中确保质量、降低风险&#xff0c;并提供卓越的用户体验。采用了较为宽松的Apache-2.0 license开源协议&#xff0c;方便志同道合的朋友一起为开…

Java Script

初识JavaScript JavaScript是什么&#xff1f; JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行 JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果…

ReactNative进阶(二十一)开源插件 react-native-device-info 获取设备信息

文章目录 一、前言二、Android 平台三、iOS 平台四、拓展阅读 一、前言 项目开发过程中&#xff0c;需要获取设备信息&#xff0c;例如获取设备名称。可通过使用开源的第三方组件react-native-device-info&#xff0c;该组件适用于iOS和Android双平台。 在ReactNative项目中可…

【接口测试】HTTP接口详细验证清单

概述 当我们在构建、测试、发布一套新的HTTP API时&#xff0c;包括我在内的大多数人都不知道他们所构建的每一个组件的复杂性和细微差别。 即使你对每一个组件都有深刻的理解&#xff0c;也可能会有太多的信息在你的脑海中出现。 以至于我们不可能一下把所有的信息进行梳理…

2023年墨西哥 SP/BMV IPC 研究报告

第一章 指数概况 1.1 指数基本情况 墨西哥 S&P/BMV IPC 指数衡量在墨西哥证券交易所 (Bolsa Mexicana de Valores, BMV)上市&#xff0c;规模最大、流动性最高的股票表现。提供一个覆盖墨西哥股市的广泛、具有代表性且可轻易复制的指数。根据多元化要求&#xff0c;按市值…

100道基于Android毕业设计的选题题目,持续更新

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 大家好&#xff0c;我是程序员徐师兄、今天给大家谈谈基于android的app开发毕设题目&#xff0c;以及基于an…

前端html原生页面兼容多端H5和移动端适配方案

目录 图片代码最后 图片 是一个注册页面 代码 自己查看效果 注意: 单位全部用rem这样才能保证兼容性适配多端&#xff0c;px转rem转换公式 1px 1/37.5rem 所以想要20px应该对应20/37.5 0.53rem <!DOCTYPE html> <html lang"en"><head><met…