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> <Scripttype= "Text/javascript">window.onload=function(){ varobtn=document.getElementById ("btn"); Obtn.onclick=function() {alert (1); }; //all the events on the page are focused on a button body IE dedicatedobtn.setcapture ();//Click Everywhere to play a } </Script> </Head> <Body> <inputtype= "button"ID= "BTN"value= "button" /> </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.
<Body>The text in IE 7 will be selected,<BR/>If you do not add a return false chrome FF will also have this problem Asdsadad<BR/> <DivID= "Div1">Asdsadad Asdsadad Asdsadad</Div>Asdsadadasdsadadasdsadad</Body>
<style type= "Text/css" > { width: 200px; height: 200px; background: Red; position: absolute; } </style><script type= "Text/javascript" >//drag empty div lower version of Firefox has 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 you lift the mouse, add it.
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 The text will not be selected in fact, the text or the picture can not get the event}Else{document.onmousemove = MouseMove; Document.onmouseup = mouseUp; }functionMouseMove (EV) {varoevent = EV | | EventvarOdivleft = OEVENT.CLIENTX-DISX;varOdivtop = Oevent.clienty-disy; ODiv.style.left = odivleft + ' px '; ODiv.style.top = odivtop + ' px '; }functionMouseUp (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 ~
Other wonderful articles
jquery Tutorial (-jquery) serialization form of AJAX operationsjquery Tutorial (-ajax) performing a POST request for Operationjquery Tutorial (-jquery) Ajax + PHP operation for AJAX requests to provide different ...jquery Tutorial (-jquery) Ajax callback functionjquery Tutorial (-ajax) error handling of operationsjquery Tutorial (-ajax) Ajax and events for Operationmore about Android Development articles
Some of the advanced applications of Javascript drag-and-drop parsing code makes it easy for you to drag and drop the principle
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
