The principle of dragging: In fact, the distance between the mouse and the upper left corner remains unchanged. Let’s look at the picture below. This red dot is the mouse.
Drag drag actually means calculating the position of an object through the position of the mouse. It is that simple and so willful. So how do you find this distance? ?
The difference between the mouse position and the object position is that distance, right? Then this diagonal line is composed of horizontal and vertical lines.
Let's see how the program is done.
<div id="div1"> </div>
In fact, what he changed was the left top of a div, and then he started moving. In that case, there must be absolute positioning, right?
<style type="text/css"> #div1 { width: 200px; height: 200px; background: red; position: absolute; } </style>Here are a few steps: 1. Press the mouse 2. Lift the mouse 3. Move the mouse
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; // Browser compatible disX = oEvent.clientX - oDiv.offsetLeft; // The horizontal position is the mouse position - the position of the div disY = oEvent.clientY - oDiv.offsetTop; }; oDiv.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; // Current mouse position -disX oDiv.style.top = oEvent.clientY - disY+'px'; }; }; </script>Talk to the picture:
var oDivLeft = oEvent.clientX - disX; the diagram is very clear
mouseup Let's not take a look at what the effect is now. .
You will find a very interesting phenomenon. If I don’t press the mouse, I will follow me. Why is this? ? ?
Let’s take a look at mousemove: No one in Javascript stipulates that you must press the mouse before you start, right? Regardless of whether you press the mouse or not, this mousemove is happening all the time, so the problem comes from here. Before the mouse is pressed, there should be no response when the mouse moves on it. You have to press it to react.
Therefore, this mousemove should not be added as soon as it is launched, but should wait until the mouse is pressed and then add mousemove to see the modified code.
By the way, mouseup is added, and his role is reflected at this time. The function is oDiv.onmousemove = null; remove the move event,
Otherwise, when your mouse is raised, the object will still follow you. oDiv.onmouseup = null; If there is no garbage left, it will be useless to lift the mouse.
Let's take a look at the modified code:
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; // Browser compatible disX = oEvent.clientX - oDiv.offsetLeft; // The horizontal position is the mouse position - the position of the div disY = oEvent.clientY - oDiv.offsetTop; oDiv.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; // Current mouse position -disX oDiv.style.top = oEvent.clientY - disY+'px'; }; oDiv.onmouseup = function() { oDiv.onmousemove = null; oDiv.onmouseup = null; // No garbage left, it would be useless to lift the mouse}; }; }; </script>Now we did a simple drag and drop, of course there are still some small problems to be solved.
But no matter what, we already have a dragging prototype. We will solve some bugs one by one in the next issue.