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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.