限制范围拖拽，磁性吸附。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
margin: 50px auto;
position: relative;
border: 1px solid #000;
width: 600px;
height: 500px;
}
#div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
</head>
<body>
<div id="wrap">
<div id="div">文字</div>
</div>
<script type="text/javascript">
(function(){
var div = document.querySelector('#div');
var maxX = div.offsetParent.clientWidth - div.offsetWidth;
var maxY = div.offsetParent.clientHeight - div.offsetHeight;
div.addEventListener('mousedown', function(e) {
e.preventDefault();
var start = {x: e.clientX,y: e.clientY};
var elOffset = {x: div.offsetLeft,y: div.offsetTop};
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', end);
function move(e){
var dis = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<0?0:(x>maxX?maxX:x);
y = y<0?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
function end(e){
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
var dis = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<100?0:(x>maxX?maxX:x);
/* 上边磁性吸附 */
y = y<100?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
});
})();
</script>
</body>
</html>以上是限制范围拖拽，磁性吸附。的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何解除视频号评论限制？视频号评论限制多少字数？
Mar 22, 2024 pm 02:11 PM
随着视频号在社交媒体上的普及，越来越多的人开始利用视频号分享他们的日常生活、见解和故事。然而，一些用户可能会遇到评论被限制的情况，这会让他们感到困惑和不满。一、如何解除视频号评论限制？要解除视频号评论限制，首先必须确保账号已正常注册并完成实名认证。视频号对评论设有要求，只有完成实名认证的账号才能解除评论限制。如果账号存在异常情况，需要先解决这些问题才能解除评论限制。2.遵守视频号的社区规范。视频号对评论内容有一定的规范要求，如果评论涉及违规内容，会被限制发言。要解除评论限制，需要遵守视频号的社区
使用java的StringBuilder.replace()函数替换指定范围的字符
Jul 24, 2023 pm 06:12 PM
使用java的StringBuilder.replace()函数替换指定范围的字符在Java中，StringBuilder类提供了replace()方法，可以用来替换字符串中指定范围的字符。该方法的语法如下：publicStringBuilderreplace(intstart,intend,Stringstr)上面的方法用于替换从索引star
C++ 函数重载的限制和注意事项有哪些？
Apr 13, 2024 pm 01:09 PM
函数重载的限制包括：参数类型和顺序必须不同（相同参数个数时），不能使用默认参数区分重载。此外，模板函数和非模板函数不能重载，不同模板规范的模板函数可以重载。值得注意的是，过度使用函数重载会影响可读性和调试，编译器从最具体到最不具体的函数进行搜索以解决冲突。
JavaScript 如何实现图片的拖动缩放同时限制在容器内？
Oct 20, 2023 pm 04:19 PM
JavaScript如何实现图片的拖动缩放同时限制在容器内？在Web开发中，经常会遇到需要对图片进行拖动和缩放的需求。这篇文章将介绍如何使用JavaScript实现图片的拖动缩放，并限制在容器内的操作。一、拖动图片要实现图片的拖动，我们可以使用鼠标事件来跟踪鼠标位置，并将图片的位置随之移动。下面是一个示例代码：//获取图片元素varimage
如何设置CentOS系统以限制用户对系统日志的修改
Jul 05, 2023 pm 03:43 PM
如何设置CentOS系统以限制用户对系统日志的修改在CentOS系统中，系统日志是非常重要的信息源，它记录了系统的运行状态、错误信息、警告等。为了保护系统的稳定性和安全性，我们应该限制用户对系统日志的修改。本文将介绍如何设置CentOS系统，实现对系统日志的修改权限限制。一、创建用户组和用户首先，我们需要创建一个专门负责管理系统日志的用户组，以及一个用于管理
找出在范围内不可被任何数整除的数字，使用C++
Sep 13, 2023 pm 09:21 PM
在本文中，我们将讨论查找1到n（给定）之间的数字的问题，这些数字不能被2到10之间的任何数字整除。让我们通过一些例子来理解这一点-Input:num=14Output:3Explanation:Therearethreenumbers,1,11,and13,whicharenotdivisible.Input:num=21Output:5Explanation:Therearefivenumbers1,11,13,17,and19,whicharenotdivisible.求解的方法简单方法如果
使用jQuery实现输入框仅允许输入数字和小数点
Feb 26, 2024 am 11:21 AM
实现jQuery输入框限制数字和小数点输入在Web开发中，我们经常会遇到需求需要控制用户在输入框中输入的内容，比如限制只能输入数字和小数点。这种限制可以通过JavaScript和jQuery来实现。下面将介绍如何使用jQuery实现输入框限制数字和小数点输入的功能。一、HTML结构首先，我们需要在HTML中创建一个输入框，代码如下：
Vue 中如何实现日期范围选择器？
Jun 25, 2023 am 08:41 AM
Vue中如何实现日期范围选择器？日期范围选择器是现代Web应用程序中经常用到的一种界面组件。它允许用户从一个日期范围中选择一个日期或者一个时间段。对于需求为日期范围选择器的Web应用程序开发，Vue.js是一个非常好的选择。Vue.js是一个用于构建用户界面的渐进式JavaScript框架，它允许开发者使用组件化的方式来构建复杂的交互式界面
