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
AI Hentai Generator
Generate AI Hentai for free.
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
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 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.
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 should I do if the maximum size of documents that WPS members can upload exceeds the limit?
Mar 20, 2024 pm 06:40 PM
WPS is an office software that integrates comprehensive operations. You can now download WPS for use, but if you want to have more functions, you need to register as a member. Some people may wonder what is the maximum file size that a WPS member can upload? If you are a WPS member user, you can upload files up to 1G each time, and all files can add up to 365G. There may be some differences in different terminals, but the overall display is basically similar. What should I do if I cannot upload beyond the limit? We will explain it next. 1. When uploading files, such as cloud documents, there is a certain amount of space. If it exceeds the size, it cannot be uploaded. 2. Click on the membership logo, purchase membership according to your needs, and expand the space. 3. Coupons may appear occasionally, so don’t forget to use them.
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.
Applications and limitations of inline template functions
Apr 28, 2024 pm 02:33 PM
Inline template functions insert code directly into the call point without generating a separate function object. Applications include code optimization, performance improvement, constant evaluation, and code simplification. But be aware of its limitations, such as longer compilation times, increased code size, reduced debuggability, and limitations across compilation units.
