Home > Developer > Web Develop
Some advanced applications of Javascript drag-and-drop-by-line code analysis make it easy for you to drag the code line by line.
Let's take a look at the problems that may occur when there is something around the drag? There won't be any problems in the advanced browser. Let's test it under IE7 and the problem will come out.
We can clearly see that all texts have been selected. The user experience is poor and it is not convenient to use. By the way, we previously added a return false; which helped us solve many problems. If we removed this, chrome would have the same problem. That is to say, this return false; can solve the problem of chrome ff IE9 + these browsers.
In fact, in our development, there are many elements on the page, and it is impossible to have a div. When you drag it, it will not be selected elsewhere. For example, Baidu map, you can play with it.
How can we achieve this drag? What about IE7?
Solution:
We can use a small trick to solve, this trick is only supported in the IE6-8, actually can solve our problem, because other browsers with return false; that's enough. Let's take a look at the tips.
Event capture !! The code is attached to a brief description.
<Title> </title> <script type = "text/javascript"> window. onload = function () {var oBtn = document. getElementById ("btn"); oBtn. onclick = function () {alert (1) ;}; // events in all places on the webpage are concentrated on an IE-dedicated oBtn button. setCapture (); // click a} </script>
In fact, events in all places on the page are concentrated to one point. clicking any position on the page will bring up a, that is, setCapture.
Put all events into one button for processing !! This is only compatible with IE !!
In this case, let me see how to modify the previous code ....
First, we should change all the documents back to the div. We can't remember that we mentioned that it is easy to drag out the div as soon as the mouse is dragged, So we add all the events to the document.
Now you don't have to do this. Add a setCapture () to our previous div to see the effect.
<Body> the text in IE 7 will be selected, <br/> asdsadad <br/> <div id = "div1"> asdsadad </div> asdsadasadasdsadad </body>
<style type="text/css"> #div1 { width: 200px; height: 200px; background: red; position: absolute; } </style>
<Script type = "text/javascript"> // drag an empty div. Firefox of earlier versions has a 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 default events and solve Firefox bug };}; </script>
In fact, when we drag it quickly, the mouse will not drag the Div. In fact, after setCapture () is added, all the events on the entire web page will gather on this div.
In fact, this text will not be selected now. Why? Because all the text and image events on the webpage are on the div, they are no longer able to get the event! So naturally they will not be selected.
Of course there is another problem now ???? You will find that when you try to select those texts, you will not be able to select them.
The events are concentrated on the div ...!!!!!
So, in fact, this setCapture () is like a lock. Now it's all locked, and all events are on the div. Now we can unlock it, and the corresponding releaseCapture ();
ReleaseCapture (); is to release the capture. In fact, you can add it when you move the mouse up.
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 solve the Firefox bug };};
Now we can solve the text selection problem. Finally, we sit down for compatibility. In fact, this setCapture () is incompatible, and it is wrong to put it in other browsers.
It's very easy. We only need to merge this time with the last code, so it's better to make an if judgment if it is compatible. Finally, the compiled 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 (); // The text in IE 7 will not be selected, but the text or image will not be selected.} 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; // prevents default events and solves Firefox bugs. };</script>
Okay, we have all done O (∩ _ ∩) O Haha ~
Other highlights
JQuery tutorial (19)-jquery ajax operation serialization form jQuery tutorial (18)-ajax operation execution POST request jQuery tutorial (20) -jquery ajax + php operations provide different Ajax requests... jQuery tutorial (21)-jquery ajax callback function jQuery tutorial (22)-ajax operation error handling jQuery tutorial (24)-ajax operations and events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
