Javascript drag application instance (2), javascript Application Instance

Javascript drag application instance (2), javascript Application Instance

You can often see a drag-and-drop verification on the registration page of another website, that is, its verification code is not displayed at the beginning, but a drag-and-drop entry, you have to drag the drag-and-drop string to the end, and the verification code will come out. You still don't understand it. Well, I'll show you a picture:

This is the figure captured on the hichina registration page. The approximate effect is that when you drag the drag box, if the drag box is not dragged to the rightmost, the drag box will be moved to the initial position, if you drag it to the rightmost side, the drag-and-drop box is displayed as a check mark, and the text in the middle has also changed. But I tried it and his verification code box was not displayed, I don't know whether it was changed or why. I didn't continue to click "OK". That's not the focus of our discussion, I will manually display the verification box in his code, that is, the picture in the last few frames of gif. In this case, I should understand what I mean, yes. What we want to achieve today is the drag-and-drop verification effect. We will not do the verification box after the drag-and-drop operation.

Let's take a look at our results:

The gif image feels a little bit stuck, and the actual effect should be smoother. Let's see if the effect is basically the same. I will not talk about the specific implementation principle. If you still don't know how to implement it, you can go out and turn left to find one I wrote:Using javascript to drag and drop web pages on a PCThe content is clearly written, and the basic principle of drag-and-drop is mastered to achieve this effect.

That is a piece of cake. Haha, I Will paste the code for your 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  }}.yseTxt{  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"> hold down the slider, drag to the rightmost </span> </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 settings 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 (left <= 0) {left = 0;} else if (Left> = pWidth-oWidth) {// left = pWidth-oWidth; obj. style. background = "# fff url (images/yes.png) no-repeat center"; aSpan. innerHTML = "verified"; // here there should be an ajax operation 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 = Math. round (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) ;}// the function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr];} else {return getComputedStyle (obj, false) [attr] ;}}

Parameter description:

Five parameters are provided: obj, parentNode, bgObj, oTxt, and endFn.

Obj: Indicates dragging objects.

ParentNode: indicates the activity area of the drag object, which is generally set to the parent level.

BgObj: indicates the background color change object during drag and drop.

OTxt: indicates a text change object.

EndFn: return function, not required

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• JS achieves webpage Div layer Clone drag effect
• JS achieves beautiful window drag effects (can change the size, maximize, minimize, close)
• Code for JavaScript-implemented 3D drag-and-drop page flip
• JS mouse drag instance analysis
• JS component Bootstrap Table row dragging implementation code
• JS component Bootstrap Table multi-row drag effect implementation code
• Use javascript to drag and drop touch screens on mobile terminals
• Using javascript to drag and drop web pages on a PC