JavaScript drag-and-drop application Example (ii) _JAVASCRIPT skills

Often see a drag-and-drop validation in the registration page of someone else's website it is the verification code just start not come out, but there is a drag-and-drop bar, you have to drag the end of this drag-and-drop, the verification code just come out, said the feeling did not say the same, you still do not understand, well, I give a picture you see:

This is in the million web registration page of the graph, the approximate effect is, when dragging the drag box, if the drag box is not dragged to the far right, the drag box moves to the original position, and if you drag to the far right, the drag box appears as a tick, and the middle text changes, but I tried, and his captcha box didn't come out, I don't know if it's changed or something, I did not continue to click OK to go down, that is not what we want to talk about, I was in his code to the verification of the box manually displayed, that is, gif the last few frames of the screen, so you should know what I want to say what the meaning of it, yes, What we're going to achieve today is this drag-and-drop validation, and we're not going to do it.

Look at the effect we've made:

GIF image feel a little card, the actual effect to smooth some, see the effect is basically no bad, the specific principle of implementation I will not say, if you do not know how to achieve the students, you can go out to the left, find I wrote a:JavaScript implementation of the PC Web page drag and drop effect , It is more clearly written, grasp the principle of drag and drop, to achieve this effect

That is a piece of cake, haha, then I will post the code for everyone to see, for reference only:

Css:

#drag_wrap {width:300px;
  height:35px;
  position:relative;
  Background: #e8e8e8;
margin:100px Auto;
  } #drag_bg {width:0;
  height:35px;
  Background: #7ac23c;
  Position:absolute;
  top:0;
left:0;
  } #drag_box {width:40px;
  height:33px;
  border:1px solid #ccc;
  Background: #fff URL (images/rt.png) no-repeat Center Center;
  Position:absolute;
  top:0;
  left:0;
  Cursor:move;
Z-index:2;
  } #drag_txt {width:100%;
  height:100%;
  Text-align:center;
  Position:absolute;
  Z-index:1;
  Background:transparent;
  Color: #9c9c9c;
  line-height:35px;
font-size:12px;
  } #drag_txt span{Cursor:default;
z-index:0; #drag_txt. starttxt{background:-webkit-gradient (linear,left top,right top,color-stop (0, #4d4d4d), Color-stop (. 4,#
  4D4D4D), Color-stop (. 5, #fff), Color-stop (. 6, #4d4d4d), Color-stop (1, #4d4d4d));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-animation:slidetounlock 3s infinite;
-webkit-text-size-adjust:none; } @-webkit-KeyFrames Slidetounlock {0% {background-position: -200px 0} 100% {background-position:200px 0}}. y
  setxt{Background:none;
Color: #fff;

 }

Html:

<div id= "Drag_wrap" >
    <div id= "DRAG_BG" ></div>
    <div id= "Drag_box" ></div>
    <div id= "drag_txt" ><span class= "Starttxt" > Please hold down the slider and drag to the rightmost </span></div>
  </div >

Javascript:

Window.onload = function () {Drag ("Drag_box", "Drag_wrap", "DRAG_BG", "drag_txt");
      function drag (OBJ,PARENTNODE,BGOBJ,OTXT,ENDFN) {var obj = document.getElementById (obj);
      var parentnode = document.getElementById (parentnode);
      var bgobj = document.getElementById (bgobj);
      var otxt = document.getElementById (otxt);
      var Aspan = Otxt.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;
          var left = Ev.clientx-disx; Left if<= 0) {left = 0;
            }else if (left >= pwidth-owidth) {//Right left = Pwidth-owidth;
            Obj.style.background = "#fff url (images/yes.png) no-repeat Center Center"; aspan.innerhtml = "Validation Pass";
          There should be AJAX operations Aspan.classname = ' ysetxt ';
          };
    
          
        Obj.style.left = BgObj.style.width = left + ' px ';
        };
          Document.onmouseup = function (EV) {var ev = EV | | | event;
          Document.onmousemove = Document.onmouseup = null;
          Magnetic adsorption var L = EV.CLIENTX-DISX;
            if (L < pwidth-owidth) {Startmove (obj,{left:0});  
          Startmove (bgobj,{width:0});
          };
          ENDFN && ENDFN ();

        Non-standard release global Capture (IE) if (obj.releasecapture) {obj.releasecapture ()};
        };
      return false;  
    }; }//Here is a motion function startmove (OBJ,JSON,ENDFN) {clearinterval (Obj.timer);
        Obj.timer = setinterval (function () {var bbtn = true;
          for (Var attr in json) {var icur = 0; if (attr = = ' opacity ') {if (Math.Round (parsefloat (getstyle) obj,attr) *100) {==0 = Icur (
            Parsefloat (GetStyle (obj,attr)) *100);
            }else{icur = Math.Round (parsefloat (GetStyle (obj,attr)) *100) | | 100;
          } else{icur = parseint (GetStyle (obj,attr)) | | 0;
          } var ispeed = (json[attr]-icur)/5; Ispeed = Ispeed >0?
          Math.ceil (ispeed): Math.floor (Ispeed);
          if (Icur!=json[attr]) {bbtn = false;
            } if (attr = = ' opacity ') {obj.style.filter = ' alpha (opacity= ' + (Icur + ispeed) + ') ';  
          Obj.style.opacity = (icur + ispeed)/100;
          } else{Obj.style[attr] = icur + ispeed + ' px '; } if (bbtn) {clearinterval (obj.timeR);
          if (ENDFN) {endfn.call (obj);
    }}},30);  
      ///This is to get CSS style functions function GetStyle (obj,attr) {if (Obj.currentstyle) {return obj.currentstyle[attr];
      }else{return getComputedStyle (Obj,false) [attr];
 

 }
    }

  }

Parameter description:

Here are 5 parameters, OBJ,PARENTNODE,BGOBJ,OTXT,ENDFN.

Obj: Drag Object

ParentNode: Drag-and-drop object activity area, generally set to parent

Bgobj: Object that represents the background color change when dragging

Otxt: Representing text-changing objects

ENDFN: Return function, not required

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