Javascript drag-and-drop simple application-line by row analysis code, let you easily understand the principle of drag and drop

Today, let's look at how to drag and drop an object without pulling out a div and dragging the adsorption function.

The last time we dragged our drag is not to drag out the scope of the visual area, on this basis we add a parent div, do not let him drag out of the parent. The principle is as simple as before.

<style type="Text/css">#div1 {  width: + px;        Height: + px;        background: red;    position: absolute; } #div2 {  width: px;        height: px;        background: #CCCCCC;  position: relative; }</style><div id="Div2">     <div id="Div1">    </div></div>

<script type="Text/javascript">             //Drag empty div low version of Firefox bugWindow.onload = function() {                varOdiv = document.getElementById ("Div1");varODiv2 = document.getElementById ("Div2");varDISX =0;varDisy =0; Odiv.onmousedown = function(EV) {                    varoevent = EV | |                    Event                    DISX = Oevent.clientx-odiv.offsetleft;                    Disy = Oevent.clienty-odiv.offsettop; Document.onmousemove = function(EV) {                        varoevent = EV | | Event//Store Div's current location                        varOdivleft = OEVENT.CLIENTX-DISX;varOdivtop = Oevent.clienty-disy;if(Odivleft <0) {Odivleft =0; }Else if(Odivleft > Odiv2.offsetwidth-odiv.offsetwidth)                        {odivleft = Odiv2.offsetwidth-odiv.offsetwidth; }if(Odivtop <0) {Odivtop =0; }Else if(Odivtop > Odiv2.offsetheight-odiv.offsetheight)                        {odivtop = Odiv2.offsetheight-odiv.offsetheight; } oDiv.style.left = Odivleft +' px '; ODiv.style.top = Odivtop +' px ';                    }; Document.onmouseup = function() {Document.onmousemove =NULL; Document.onmouseup =NULL; };return false;//block default events, fix bugs in Firefox}; };</script>

as follows: simple.

The next step is how to get him to automatically snap.

In fact, this people will often use, such as PS inside a small window dragged dragged to the edge of the page, he will automatically adsorption up.

How can we drag and drop such a function?

In fact, before the movement of the time mentioned, like a taxi you can not exactly the driver to stop there, he must be parked near the destination of the place.

That procedure is the same, almost soon to be directly assigned to the value. Assuming that the object I dragged was 50px from the left, I thought he was on the left, and the direct assignment was 0, and he would automatically snap it up.

The principle is simple, see how the code is implemented. You can change it slightly

<script type="Text/javascript">Window.onload = function() {                varOdiv = document.getElementById ("Div1");varODiv2 = document.getElementById ("Div2");varDISX =0;varDisy =0; Odiv.onmousedown = function(EV) {                    varoevent = EV | |                    Event                    DISX = Oevent.clientx-odiv.offsetleft;                    Disy = Oevent.clienty-odiv.offsettop; Document.onmousemove = function(EV) {                        varoevent = EV | | EventvarOdivleft = OEVENT.CLIENTX-DISX;varOdivtop = Oevent.clienty-disy;//When left less than 50 automatically return to 0 to achieve adsorption                        if(Odivleft < -) {Odivleft =0; }Else if(Odivleft > Odiv2.offsetwidth-odiv.offsetwidth)                        {odivleft = Odiv2.offsetwidth-odiv.offsetwidth; }if(Odivtop <0) {Odivtop =0; }Else if(Odivtop > Odiv2.offsetheight-odiv.offsetheight)                        {odivtop = Odiv2.offsetheight-odiv.offsetheight; } oDiv.style.left = Odivleft +' px '; ODiv.style.top = Odivtop +' px ';                    }; Document.onmouseup = function() {Document.onmousemove =NULL; Document.onmouseup =NULL; };return false;            }; };</script>

The next time you talk about advanced applications, these will be more responsible and more useful. We have perfected our drag and drop function.

For example, the drag of the picture and the selection of text. For example, we now have a drag on the page is only a div, in peacetime development is not encountered.

In fact, in the case of something on the page, what is the problem with this drag-and-drop???

Next time will solve ~ please look forward to

Javascript drag-and-drop simple application-line by row analysis code, let you easily understand the principle of drag and drop