java实现坐标图进行拖拉拽放_js实现限定区域范围拖拉拽效果

本文实例为大家分享了js实现限定区域范围拖拉拽的具体代码,供大家参考,具体内容如下

需要在范围内拖拉拽,之前看来许多资料觉得都不是特别满足要求,今天自己写了一个,通过监听鼠标按下、鼠标抬起、鼠标移动事件来控制

代码如下

Document

#drag {

background: aqua;

width: 200px;

height: 200px;

position: absolute;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

#parent {

position: relative;

background: #cde4dc;

height: 80vh;

overflow: hidden;

}

这是一个测试

//自执行函数,需要拖拽的元素需要设置position:absolute,父元素position:relative

//有传父亲节点、若无则默认body为父节点

((parent, children, mouseType) => {

if (!children) return;

let childrenDiv = document.querySelector(children);

childrenDiv.style.position = 'absolute';

let parentDiv = parent

? document.querySelector(parent)

: document.querySelector('body');

let isDown = false;

let x,

y,

l,

t = 0;

childrenDiv.onmousedown = function (e) {

x = e.clientX;

y = e.clientY;

// 获取左部和底部的偏移量

l = childrenDiv.offsetLeft;

t = childrenDiv.offsetTop;

isDown = true;

childrenDiv.style.cursor = mouseType || 'move';

};

// 鼠标移动

window.onmousemove = function (e) {

if (!isDown) {

return;

}

//获取移动后的x和y坐标

let nx = e.clientX;

let ny = e.clientY;

//获取父元素的宽高

let parentWidth = parentDiv.clientWidth;

let parentHeight = parentDiv.clientHeight;

//获取子元素的宽高

let childrenWidth = childrenDiv.clientWidth;

let childrenHight = childrenDiv.clientHeight;

// 计算移动后的左偏移量和顶部偏移量

let nLeft = nx - (x - l);

let nTop = ny - (y - t);

let nRight = nLeft + childrenWidth;

let nBottom = nTop + childrenHight;

nLeft = nLeft <= 0 ? 0 : nLeft; //判断左边距离是否越界

nTop = nTop <= 0 ? 0 : nTop; //判断上边距离是否越界

//判断右边距离大于父元素宽度

if (nRight >= parentWidth) {

nLeft = parentWidth - childrenHight;

}

// 判断下边界是否越界

if (nBottom >= parentHeight) nTop = parentHeight - childrenHight;

childrenDiv.style.left = nLeft + 'px';

childrenDiv.style.top = nTop + 'px';

};

// 鼠标抬起事件

document.onmouseup = function (e) {

//鼠标抬起

isDown = false;

childrenDiv.style.cursor = 'default';

};

})('#parent', '#drag', 'move');

4f9952310db300081b78b9cbc8e3bd2f.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

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

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

相关文章

上拉加载更多后台数据_微信小程序端操作云数据库

一、分清几个概念1、云开发&#xff0c;简言之就是可以直接用微信小程序开发者工具完成一个从前台到后台的小程序项目。2、小程序端&#xff0c;使用云开发的时候&#xff0c;miniprogram中写的代码可以叫做小程序端&#xff08;真实是我不知道可以不可以这么认为&#xff09;。…

关于springMVC传参问题

今天写项目&#xff0c;碰到一个以前灭有注意到的问题&#xff0c;一般情况下使用springMVC Controller注解之后&#xff0c;被此注解标记的方法的参数名只需要跟页面表单的标签的name的值相同即可拿到页面的值&#xff0c;但是如果标签加了disabled"disabled" 属性…

mysql + keepalived高可用

1上次说过了mysql的主从配置 tar zxf keepalived-1.2.7.tar.gz cd keepalived-1.2.7 yum install gcc gcc-c yum install kernel-devel -y 2报错 configure: error: Popt libraries is required yum install popt-devel 3继续执行 ./configure --with-kernel-dir/usr/src/kerne…

java+向前进一_Java 线程基础

前言线程并发系列文章&#xff1a;熟练掌握线程原理与使用是程序员进阶的必经之路&#xff0c;网上很多关于Java线程的知识&#xff0c;比如多线程之间变量的可见性、操作的原子性&#xff0c;进而扩展出的Volatile、锁(CAS/Synchronized/Lock)、信号量等知识。有些文章只说笼统…

python如何给定取值范围_python怎么限定函数自变量取值范围

匿名用户1级2017-11-20 回答Python中函数参数的定义主要有四种方式&#xff1a;1. F(arg1,arg2,…)这是最常见的定义方式&#xff0c;一个函数可以定义任意个参数&#xff0c;每个参数间用逗号分割&#xff0c;用这种方式定义的函数在调用的的时候也必须在函数名后的小括号里提…

tp5无刷新分页

控制器 <?phpnamespace app\index\controller; use think\Db; class Index{ public function userlist() { $listDb::name(users)->paginate(10,false, [ type > Bootstrap, var_page > page, //使用jqery 无刷新分页 path>javascript:AjaxPage([PAGE]); ]); r…

安装kickstart失败

yum -y install dhcp*yum -y install tftp*yum -y install nfs修改tftp配置文件 default: off description: The tftp server serves files using the trivial file transfer \ protocol. The tftp protocol is often used to boot diskless \ workstations, download conf…

java内存溢出让tomcat停止_java - 使用JVM Open J9一段时间后,应用程序(tomcat)停止响应 - 堆栈内存溢出...

我正在使用Open J9&#xff0c;一段时间后我的应用程序停止响应。.在生产中发生了2个小时后&#xff0c;在本地设法使用JMeter进行模拟。 应用程序(tomcat)只是停止响应&#xff0c;我需要重新启动才能将其取回。 问题是日志(catalina和log4j)中没有任何内容可以帮助我进行调查…

电子报账系统源码_网上商城系统建设心得,轻松搞定选择困难

当前&#xff0c;我们正处于一个互联网飞速发展的时代&#xff0c;特别是互联网电商的出现&#xff0c;给我们的生活带来了翻天覆地的变化&#xff0c;不出家门便可购买各种商品&#xff0c;不用再到处奔走寻找&#xff0c;通过网络便可快速下单&#xff0c;然后坐等送货上门。…

前端现在到底需要什么样的人才

昨天和几个大佬们在一起聊聊前端的技术。 大致内容如下&#xff1a; 1.前端三剑客 Html css javascript 这是必不可少的&#xff0c;其中js是核心。 2.框架之所以火,并不是它本身有多牛逼&#xff0c;而是大家都在用&#xff0c;间接把它吹棒起来了。为什么&#xff1f; 框…

源码安装httpd

1 tar -xvf apr-1.7.0.tar.gz tar -xvf apr-util-1.6.1.tar.gz tar -xvf httpd-2.2.6.tar.gz 2cd apr-1.7.0 ./configure Make Make install 3cd apr-util-1.6.1 ./configure --with-apr/usr/local/apr 解决rpm -ivh libexpat-devel-2.2.4-alt1.i586.rpm tar -xvf expat-2.2…

python 获取字符串中的字典_python cookies提取——从字符串到字典(一行Python代码)...

def extract_cookies(cookie):"""从浏览器或者request headers中拿到cookie字符串&#xff0c;提取为字典格式的cookies"""cookies dict([l.split("", 1) for l in cookie.split("; ")])return cookiesif __name__ "…

python如何运行py程序_如何用Python汇款:Web3.py教程

Python开发人员对于以太坊和区块链库的技术练习。警告&#xff1a;下面的教程包含这些元素&#xff1a;显式加密、点对点金融服务以及可能的违规行为。这些例子仅仅是为了说明Python区块链的强大功能和便捷性。嗨&#xff0c;Pythoners&#xff0c;你们好&#xff01;我真的很喜…

基于域名的apache服务器

1承接上个博客说的&#xff0c;咱们继续扩展 Cd /usr/local/apache2/conf /usr/local/apache2/conf/extra扩展文件 Vi httpd-vhosts.conf <VirtualHost *:80> ServerAdmin 1327629137qq.com DocomentRoot “/data/webapps/www1” ServerName www.wugk1.com <Directory…

MySQL 数据库修改登录密码

MySQL 数据库修改登录密码、、 -------- mysql修改密码 默认的密码为空&#xff1a;mysql -u root -p第一次更改密码&#xff1a;mysqladmin -uroot -p password xhyEnter password: xhy 第二次更改密码&#xff1a; mysqladmin -uroot -pxhy password xhy1mysql -u root -p En…

python列表统计每个元素出现次数_python 统计list中各个元素出现的次数的几种方法...

利用字典dict来完成统计举例&#xff1a;a [1, 2, 3, 1, 1, 2]dict {}for key in a:dict[key] dict.get(key, 0) 1print dict输出结果&#xff1a;>>>{1: 3, 2: 2, 3: 1}利用Python的collection包下Counter的类举例&#xff1a;from collections import Countera …

freeBSD的vi

vi 的两种命令模式&#xff1b; Command&#xff08;命令&#xff09;模式&#xff0c;用于输入命令&#xff1b; Insert&#xff08;插入&#xff09;模式&#xff0c;用于插入文本&#xff1b; Visual&#xff08;可视&#xff09;模式&#xff0c;用于视化的的高亮并选定正文…

raid5需要几块硬盘_Raid5磁盘阵列数据恢复思路分析--附真实案例

1.raid5磁盘阵列数据恢复思路分析Raid5磁盘阵列是一种相对安全的磁盘阵列形式&#xff0c;数据分布状态有点类似于raid0磁盘阵列。但是raid5阵列比raid0阵列更为安全的一点就是阵列的每一组平行数据块中都包含了一个校验块&#xff0c;校验块的作用主要表现在阵列有一块硬盘掉线…

Linux思维导图之sed、实战习题

命令解释&#xff1a; ◆sed 2p /etc/passwd第二行打印了两次其余一次 ◆sed-n 2p /etc/passwd 只打印出第二行 ◆sed-n 1,4p /etc/passwd 只打印出1到4行 ◆sed-n /root/p /etc/passwd只打印出root的行 ◆ sed-n 2./root/p /etc/passwd打印从2行开始往下到root行 ◆sed-n /^$/…

jenkins安装(1)

1先在互联网上输入jenkins.io 2下载jenkins.war 3上传到服务器上 安装jdk前面的博客已经说过了 4 Jenkins requires Java versions [8, 11] but you are running with Java 1.7 from /usr/java/jdk1.7.0_06/jre java.lang.UnsupportedClassVersionError: 51.0 at Main.verifyJa…