Home > Developer > JavaScript
Let's see what happens when you drag and drop something around you. In the advanced browser is not a problem, we put it under the IE7 test, the problem is out.
We can clearly see that the text has been selected. The user experience is not very good, it is not convenient to use. By the way, we've added a return of false to help us solve a lot of problems, if you remove this, chrome will also appear the same problem. That is to say, this return is false; Chrome FF ie9+ these browser issues.
In fact, in our development, the page will have a lot of elements, it is impossible to a div, when you drag other places will not be selected, such as Baidu Map, we can play.
So how do we do a drag-and-drop? Can solve the problem of IE7?
Solution:
We can solve this with a little trick, this technique is only supported in Ie6-8, and actually solves our problem, because the other browsers use return false; It's enough. Let's see what the trick is.
is the event capture!! A brief description of the enclosed code
<title></title> <script type="Text/javascript">window.onload=function(){var obtn=document.getelementbyid ("BTN" ); obtn.onclick=function(){ alert (1); }; //The events on the page all over the place are focused on a button body IE dedicated obtn.setcapture (); //Click where to play a } </script> </head> <body> <input type="button" id= "btn" value="pushbutton" / > </body>In fact, all the places on the page are focused on one point, and clicking anywhere on the page pops up a, which is the setcapture () effect.
Focus all events on a single button to handle!! This is only IE compatible!!
So, let me see how to modify the previous code ....
We first change all of the document back to Div, remember we said before because the mouse drag quickly easy to drag out the Div, so the event is added to the document.
And now you don't have to do this, give us a setcapture () before the Div to see the effect.
<style type="Text/css"> #div1 { width: px; height: px; background: red; position: absolute; } </style><body> IE 7 中的文字会被选中 ， <br />如果不加return false chrome ff 也会有这样的问题 asdsadad <br /> <div id="div1"> asdsadad asdsadad asdsadad </div> asdsadadasdsadadasdsadad </body>
<script type="Text/javascript"> //Drag empty div low version of Firefox bugWindow.onload = function() { varOdiv = document.getElementById ("Div1");varDISX =0;varDisy =0; Odiv.onmousedown = function(EV) { varoevent = EV | | Event DISX = Oevent.clientx-odiv.offsetleft; Disy = Oevent.clienty-odiv.offsettop; Odiv.onmousemove = function(EV) { varoevent = EV | | EventvarOdivleft = OEVENT.CLIENTX-DISX;varOdivtop = 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, fix bugs in Firefox}; };</script>This time we actually drag the mouse to drag the div out of the question soon. After actually adding setcapture (), all the events on the page will be clustered on this div.
In fact, now, this text will not be selected. Why is it? Because now the text on the page, the picture of all the events are on the Div, they have not got the event! So naturally they would not have been chosen.
Of course, now there is a problem???? You'll find that when you try to select those words, you can't choose.
How to be good, events are focused on the DIV ...!!!!!
So, in fact, this setcapture () is like a lock, now locked, the event is in the div above, now unlock it can be the corresponding there is releasecapture ();
ReleaseCapture (); is to release the capture. Actually, when the mouse is lifted up, it can be added.
Window.onload = function() { varOdiv = document.getElementById ("Div1");varDISX =0;varDisy =0; Odiv.onmousedown = function(EV) { varoevent = EV | | Event DISX = Oevent.clientx-odiv.offsetleft; Disy = Oevent.clienty-odiv.offsettop; Odiv.onmousemove = function(EV) { varoevent = EV | | EventvarOdivleft = OEVENT.CLIENTX-DISX;varOdivtop = 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 default events, fix bugs in Firefox}; };Now you can solve the problem of text selection. Finally we sit down compatible, in fact this setcapture () is incompatible, placed in other browsers is wrong.
So very simple, we just need to merge this with the last time the code is OK, compatible with it to make an if judgment. Finally, I enclose the compiled code.
<script type="Text/javascript">Window.onload = function() { varOdiv = document.getElementById ("Div1");varDISX =0;varDisy =0; Odiv.onmousedown = function(EV) { varoevent = 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 text will not be selected in fact, the text or the picture can not get the event}Else{document.onmousemove = MouseMove; Document.onmouseup = mouseUp; } function mouseMove(EV) { varoevent = EV | | EventvarOdivleft = OEVENT.CLIENTX-DISX;varOdivtop = 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 default events, fix bugs in Firefox}; };</script>All right, all done. O (∩_∩) o haha ~
Javascript drag-and-drop advanced applications-line-by-row analysis code to make it easy to understand the principle of drag and drop
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
