Let's see what problems will occur when the previous dragging is there when something around it? There will be no problem in advanced browsers. Let's test it in IE7 and the problem will come out. As shown
We can clearly see that the text has been selected. Then this user experience is very bad and it is not convenient to use. By the way, we added a return false before; helped us solve many problems. If we remove this, the same problem will occur in Chrome. So that is to say, this return false; can solve the problems of Chrome ff IE9+ browsers.
In fact, in our development, there are many elements on the page, and it is impossible to have only one div. Other places will not be selected when you drag, such as Baidu Map, you can play with it.
So how do we do such a drag? Can it solve the IE7 problem?
Solution:
We can use a small trick to solve it. This trick can only be supported in IE6-8, and can actually solve our problem, because other browsers use return false; Let's see what the tricks are
It's event capture! ! Attach the code to the brief description
<title></title> <script type="text/javascript"> window.onload=function(){ var oBtn=document.getElementById("btn"); oBtn.onclick=function(){ alert(1); }; // Events on all places on the web page are concentrated on a button IE dedicated oBtn.setCapture(); // Wherever you click, you pop a } </script> </head> <body> <input type="button" id="btn" value="button" /> </body>In fact, the events on all places on the page are concentrated at a point, and a pops up when clicking on any position of the page, which is the function of setCapture().
Collect all events to one button to handle! ! This is only compatible with IE! !
In this way, let me see how to modify the previous code. . . .
First, we change all the documents back to the div. Do you remember that we have said before that because the mouse drags faster, it is easy to drag out the div, so we add all the events to the document.
And now there is no need to do this, add a setCapture() to our previous div to see the effect.
<body> The text in IE 7 will be selected. <br />If you do not add return false chrome ff, there will be such a problem asdsadad <br /> <div id="div1"> asdsadad asdsadad asdsadad </div> asdsadadasdsdsadad </body>
<style type="text/css"> #div1 { width: 200px; height: 200px; background: red; position: absolute; } </style> <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; oDiv.onmousemove = function(ev) { var oEvent = ev || event; var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; }; oDiv.onmouseup = function() { oDiv.onmousemove = null; oDiv.onmouseup = null; }; oDiv.setCapture(); return false; // Block the default event and resolve the firefox bug }; }; </script>At this time, we actually don’t have the problem of dragging out the Div when we drag it quickly. In fact, after adding setCapture(), all events on the entire web page will be gathered on this div.
In fact, this text will not be selected now. Why? Because all the events in the text and pictures are now on the div, they can no longer get the events! So naturally they won't be selected.
Of course there is another problem now? ? ? ? You will find that when you try to select those words, you will not be selected.
What should I do? All the events are concentrated on the div. . . !!!!!!
So, in fact, this setCapture() is like a lock. Now it is locked, and the events are all on the div. Now it is OK to unlock it. The corresponding one is releaseCapture();
releaseCapture(); is to release capture. In fact, just add it when the mouse is raised.
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; var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; }; oDiv.onmouseup = function() { oDiv.onmousemove = null; oDiv.onmouseup = null; oDiv.releaseCapture(); }; oDiv.setCapture(); return false; // Block the default event and resolve the firefox bug }; };Now we can solve the problem of text selection. Finally, we sit down and compatible. In fact, this setCapture() is incompatible, and it is wrong to put it in other browsers.
That's very simple. We just need to merge the codes from this and the last one. Just make an if judgment compatible. Finally, the organized code is attached
<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; if (oDiv.setCapture) { oDiv.onmousemove = mouseMove; oDiv.onmouseup = mouseUp; oDiv.setCapture(); // IE 7 The following text will not be selected, it is actually the text or picture that cannot be obtained.} else { document.onmousemove = mouseMove; document.onmouseup = mouseUp; } function mouseMove(ev) { var oEvent = ev || event; var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; } function mouseUp(ev) { this.onmousemove = null; this.onmouseup = null; if (oDiv.releaseCapture) { oDiv.releaseCapture(); // Release capture} } return false; // Block the default event and resolve the firefox bug }; }; </script>Okay, everything is done O(∩_∩)O Haha~