JavaScript drag and Drop application example _javascript tips

Before the article also talked about the basic idea of dragging and dragging, the theory is there, that practice, can be applied to where? Below to bring you a drag-and-drop thought to write a small example, for everyone's reference, the general effect of looking at the following figure:

It's such a simple drag-and-drop bar, you can understand it as a scroll bar, you can also understand the number of forms to select the control, but also can be understood as a progress bar, and so on, you can change to a lot of the effect you want, nonsense not to say, let's see how this is done!

Think about it, the principle of feeling needless to say it, I have been in the drag-and-drop effect has been said very clearly, not clear students can go out to the left, see JavaScript Small instances, PC Web page drag, I will directly paste the code:

Css:

<style> #drag_wrap {width:220px;
  height:10px;
  position:relative;
margin:100px Auto;
  }. dis_bg{width:200px;
  height:10px;
  border-radius:10px;
  Background: #ccc;
margin-left:10px;
  } #drag_bg {width:0;
  height:10px;
  border-radius:10px;
Background: #0CF;
  } #drag_box {width:20px;
  height:20px;
  border-radius:10px;
  Background: #F30;
  Position:absolute;
  top:-5px;
  left:0;
Cursor:move;
  } #drag_box span{width:40px;
  height:20px;
  Text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  Position:absolute;
  top:-25px;
  left:-10px;
  Color: #333;
Background: #fff;
  } #drag_wrap1 {width:10px;
  height:220px;
  position:relative;
margin:100px Auto;
  }. dis_bg1{width:10px;
  height:200px;
  border-radius:10px;
  Background: #ccc;
  Position:absolute;
top:10px;
  } #drag_bg1 {width:10px;
  height:0;
  border-radius:10px;
Background: #0CF;
  } #drag_bg1 {width:10px;
  height:0;
  border-radius:10px;
Background: #0CF; } #drag_box1 {width:20px;
  height:20px;
  border-radius:10px;
  Background: #F30;
  Position:absolute;
  top:-5px;
  left:-5px;
Cursor:move;
  } #drag_box1 span{width:40px;
  height:20px;
  Text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  Position:absolute;
  top:0;
  left:25px;
  Color: #333;
Background: #fff;

 } </style>

Html:

<div id= "Drag_wrap" >
    <div class= "DIS_BG" >
      <div id= "DRAG_BG" ></div>
    </div >
    <div id= "Drag_box" ><span>0</span></div>
     
  </div>
  <div id= "Drag_ Wrap1 ">
    <div class=" dis_bg1 ">
      <div id=" drag_bg1 "></div>
    </div>
    < Div id= "Drag_box1" ><span>0</span></div>
  </div>

Javascript:

Window.onload = function () {Drag ("Drag_box", "Drag_wrap", "DRAG_BG", "left");
     
    Drag ("Drag_box1", "Drag_wrap1", "drag_bg1", "top");
      function drag (OBJ,PARENTNODE,BGOBJ,ATTR,ENDFN) {var obj = document.getElementById (obj);
      var parentnode = document.getElementById (parentnode);
      var bgobj = document.getElementById (bgobj);
      var onum = obj.getelementsbytagname (' span ') [0];
         
        Obj.onmousedown = function (EV) {var ev = EV | | | event;
 
        Non-standard set global capture (IE) if (obj.setcapture) {obj.setcapture ()};
        var disx = ev.clientx-this.offsetleft, Disy = ev.clienty-this.offsettop;
        var owidth = obj.offsetwidth, oheight = obj.offsetheight;     
        var pWidth = parentnode.offsetwidth, pheight = parentnode.offsetheight;
          Document.onmousemove = function (EV) {var ev = EV | | | event;
     if (attr = = "Left") {//transverse var left = Ev.clientx-disx;       Left <= 0) {left-hand = 0;
            }else if (Left > Pwidth-owidth) {//Right left = Pwidth-owidth;
            };
            Obj.style.left = BgObj.style.width = left + ' px ';
             
          Onum.innerhtml = left;
             }else if (attr = = "Top") {//vertical var top = Ev.clienty-disy;
            Above if (top <= 0) {tops = 0;
            }else if (Top > Pheight-oheight) {//below top = pheight-oheight;
            };
            Obj.style.top = BgObj.style.height = top + ' px ';
          onum.innerhtml = top;
           
        };
        };
          Document.onmouseup = function (EV) {var ev = EV | | | event;
          Document.onmousemove = Document.onmouseup = null;
          ENDFN && ENDFN ();
 
        Non-standard release global Capture (IE) if (obj.releasecapture) {obj.releasecapture ()};
        };
      return false; 
   }; } 
   
  }
 

Parameter description:

Here are 5 parameters, OBJ,PARENTNODE,BGOBJ,ATTR,ENDFN, respectively:

Obj: Dragged object

ParentNode: The object that restricts the activity area of the object being dragged, typically set to its parent

Bgobj: A table-color background object when dragging

Attr:2 a parameter left,top, indicating whether to drag horizontally or vertically

ENDFN: Returns the function, has executes, does not carry on, does not have to fill in

The above is the entire content of this article, I hope to help you learn.