JavaScript：

<div class="jb51code">
<pre class="brush:js;">
window.onload = function(){

drag("drag_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>","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;

    //非标准设置全局捕获(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;
      //左侧
      if(left <= 0){
        left = 0;
      }else if(left >= pWidth - oWidth){//右侧
        left = pWidth - oWidth;
        obj.style.background = "#fff url(images/yes.png) no-repeat center center";
        aSpan.innerHTML = "验证通过"; //这里应该有ajax操作
        aSpan.className = 'yseTxt';
      };
      obj.style.left = bgObj.style.width = left + 'px';


    };
    document.onmouseup = function(ev){
      var ev = ev || event;
      document.onmousemove = document.onmouseup = null;
      //磁性吸附
      var L = ev.clientX - disX;
      if(L < pWidth - oWidth){
        startMove(obj,{left:0});
        startMove(bgObj,{width:0});  
      };
      endFn && endFn();
      //非标准释放全局捕获(IE)
      if(obj.releaseCapture){
        obj.releaseCapture()  
      };

    };
    return false;
  };  
}  
//这里是一个运动函数
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);
}
//这里是<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>css样式<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
function getStyle(obj,attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];  
  }else{
    return getComputedStyle(obj,false)[attr];
  }
}

}