Limited range dragging, magnetic adsorption.
<!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>The above is the detailed content of Limited range dragging, magnetic adsorption.. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to remove comment restrictions on video accounts? What is the word limit for comments on a video account?
Mar 22, 2024 pm 02:11 PM
With the popularity of video accounts on social media, more and more people are beginning to use video accounts to share their daily lives, insights and stories. However, some users may experience comments being restricted, which can leave them confused and dissatisfied. 1. How to remove comment restrictions on video accounts? To lift the restriction on commenting on a video account, you must first ensure that the account has been properly registered and real-name authentication has been completed. Video accounts have requirements for comments. Only accounts that have completed real-name authentication can lift comment restrictions. If there are any abnormalities in the account, these issues need to be resolved before comment restrictions can be lifted. 2. Comply with the community standards of the video account. Video accounts have certain standards for comment content. If the comment involves illegal content, you will be restricted from speaking. To lift comment restrictions, you need to abide by the community of the video account
Use java's StringBuilder.replace() function to replace a specified range of characters
Jul 24, 2023 pm 06:12 PM
Use java's StringBuilder.replace() function to replace a specified range of characters. In Java, the StringBuilder class provides the replace() method, which can be used to replace a specified range of characters in a string. The syntax of this method is as follows: publicStringBuilderreplace(intstart,intend,Stringstr) The above method is used to replace the index star from
How to use JavaScript to drag and zoom images while limiting them to the container?
Oct 20, 2023 pm 04:19 PM
How does JavaScript implement dragging and zooming of images while limiting them to the container? In web development, we often encounter the need to drag and zoom images. This article will introduce how to use JavaScript to implement dragging and zooming of images and limit operations within the container. 1. Drag the picture To drag the picture, we can use mouse events to track the mouse position and move the picture position accordingly. The following is a sample code: //Get the picture element varimage
What are the limitations and considerations for C++ function overloading?
Apr 13, 2024 pm 01:09 PM
Restrictions on function overloading include: parameter types and orders must be different (when the number of parameters is the same), and default parameters cannot be used to distinguish overloading. In addition, template functions and non-template functions cannot be overloaded, and template functions with different template specifications can be overloaded. It's worth noting that excessive use of function overloading can affect readability and debugging, the compiler searches from the most specific to the least specific function to resolve conflicts.
How to set up a CentOS system to restrict user modifications to system logs
Jul 05, 2023 pm 03:43 PM
How to set up the CentOS system to restrict users from modifying the system log. In the CentOS system, the system log is a very important source of information. It records the system's operating status, error messages, warnings, etc. In order to protect the stability and security of the system, we should restrict users from modifying system logs. This article will introduce how to set up the CentOS system to restrict the modification permissions of the system log. 1. Create user groups and users. First, we need to create a user group specifically responsible for managing system logs, and a user group for managing system logs.
Find numbers that are not divisible by any number in a range, using C++
Sep 13, 2023 pm 09:21 PM
In this article, we will discuss the problem of finding numbers between 1 and n (given) that are not divisible by any number between 2 and 10. Let us understand this with some examples - Input:num=14Output:3Explanation:Therearethreenumbers,1,11,and13,whicharenotdivisible.Input:num=21Output:5Explanation:Therearefivenumbers1,11,13,17,and19,whicharenotdivisible. Solved Simple method if
How to implement date range selector in Vue?
Jun 25, 2023 am 08:41 AM
How to implement date range selector in Vue? The date range picker is an interface component often used in modern web applications. It allows the user to select a date or a time period from a date range. For web application development that requires a date range selector, Vue.js is a very good choice. Vue.js is a progressive JavaScript framework for building user interfaces. It allows developers to build complex interactive interfaces using componentization.
What are the limitations of reflection mechanism in Go language?
Jun 09, 2023 pm 11:31 PM
As a statically typed language, Go language needs to clarify the type of each variable when writing code. However, in some cases, we need to dynamically analyze and operate types in the program, and in this case, we need to use the reflection mechanism. The reflection mechanism can dynamically obtain the type information of the program object when the program is running, and can analyze and operate it, which is very useful. However, the reflection mechanism in Go language also has some limitations. Let’s take a closer look below. The impact of reflection mechanism on performance Using reflection mechanism can greatly enhance generation
