Today we will solve some problems in the prototype of the last dragging. Let’s see what are the problems?
Attached the Javascript code from the previous issue to facilitate everyone to view the problem.
<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; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; oDiv.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; oDiv.style.top = oEvent.clientY - disY+'px'; }; oDiv.onmouseup = function() { oDiv.onmousemove = null; oDiv.onmouseup = null; }; }; }; </script>1. If my mouse moves faster now, you will find that the mouse comes out of this div, and the div will not follow the mouse at this time.
Then why does this problem occur?
The reason is actually very simple. We add the mousemove event to the div, so once the mouse deviates from the div, mousemove will no longer be triggered at this time.
Solution: The event loads on the document, because your mouse is still in the page no matter what, mousemove will be triggered no matter what, so it will be fast.
Then we modify the code accordingly.
<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; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; // On the event load document.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; oDiv.style.top = oEvent.clientY - disY+'px'; }; oDiv.onmouseup = function() { document.onmousemove = null; oDiv.onmouseup = null; }; }; }; </script>Then this problem can be solved.
2. Let's see what problems are still there. Although the problem of dragging quickly was solved, when I moved the mouse to this position
Now you can clearly see that the mouse is not on the div. If you lift the mouse at this time, you can see that it will move after you come back. This is another bug!
In fact, this question is the same as the one above. So it's very simple to solve, let's add mouseup to the document, let's try it out
document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; };In this way, if you move to the position you just now, there will be no previous bug, and there will be no problem with moving fast. Everything is normal.
3. Let's take a look at the browser compatibility issues
In fact, there is such a problem in the lower version of Firefox browser
. How did it happen? When you drag the first time, it is right. When you drag it once, press and hold it and move it, you will find that there will be a shadow behind it. What's going on with this?
In fact, the firefox we are dragging now is buggy. So what if we add some content to the div
You will find that there is no problem now.
So the firefox bug only appears in the empty div.
Solution:
In fact, it's very simple. We just need to block the browser's default event and return false; in onmousedown. Why add it to onmousedown?
You can think about which event does dragging start? It starts with onmousedown. When the mouse is pressed, dragging starts. So you need to load onmousedown.
In fact, it just added a sentence return false; blocked the Firefox bug.
This way, no matter how you delay, there will be no problem.
Attached 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; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; // On the event load document.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; oDiv.style.top = oEvent.clientY - disY+'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; }; }; </script>The program is now complete, but there are still some problems with user experience.
For example, if a user may drag this div out of the browser, how can he solve it?
Then we're adding a judgment. This is very simple, if you go out from the left
, that is directly equal to 0, and he can't get out from the left. Then the same is true above.
So how can we prevent ourselves from going out from the right? ? Just draw a picture and make it clear. In fact, we can calculate it by subtracting the visual width of the page from the div.
Then this is the so-called maximum value. Just judge if the distance moved exceeds this maximum value, it is equal to this maximum value. Then the following is the same.
Attach the full code:
<script type="text/javascript"> // Drag and drop empty div. Low version of Firefox has bug window.onload = function() { var oDiv = document.getElementById("div1");var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; // Store the current location of the div var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; // Drag out from the left if (oDivLeft < 0) { oDivLeft = 0; } else if (oDivLeft > document.documentElement.clientWidth - oDiv.offsetWidth) { oDivLeft = document.documentElement.clientWidth - oDiv.offsetWidth; } if (oDivTop < 0) { oDivTop = 0; } else if (oDivTop > document.documentElement.clientHeight - oDiv.offsetHeight) { oDivTop = document.documentElement.clientHeight - oDiv.offsetHeight; } oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; // Block the default event and resolve the Firefox bug }; }; </script>Then the drag is more complete now. O(∩_∩)O