자바스크립트 드래그 앤 드롭 활용 예시(2)_자바스크립트 스킬

다른 웹사이트의 등록 페이지에서 드래그 앤 드롭 인증 효과를 자주 봅니다. 즉, 처음에는 인증 코드가 나오지 않지만 드래그 앤 드롭 바가 있어야 합니다. 이 드래그 바를 끝까지 , 인증 코드가 방금 나왔는데 내가 말하지 않은 것처럼 느껴지지만 여전히 이해하지 못합니다. 알겠습니다. 사진을 보여 드리겠습니다.

완왕 등록 페이지에서 찍은 사진입니다. 대략적인 효과는 드래그 박스를 드래그할 때 드래그 박스를 맨 오른쪽으로 드래그하지 않으면 드래그 박스가 초기 위치로 이동한다는 것입니다. 맨 오른쪽으로 드래그하면 드래그 박스가 체크 표시로 나타나며, 가운데 텍스트도 바뀌는데, 시도해 보니 인증번호 박스가 나오지 않는지 모르겠습니다. 변경되었거나 뭔가가 있었으므로 계속해서 확인을 클릭하지 않았습니다. 이는 우리가 이야기하는 내용의 초점이 아닙니다. 코드의 마지막 몇 프레임에 있는 그림인 확인 상자를 수동으로 표시했습니다. gif 이런 식으로 제가 원하는 것이 무엇인지 이해하셔야 합니다 네, 오늘 우리가 이루고자 하는 것은 드래그 앤 드롭 검증 효과입니다

우리가 수행한 결과를 살펴보세요.

GIF 이미지가 좀 멈춘 느낌이 듭니다. 실제 효과는 기본적으로 동일하다고 볼 수 있습니다. 구현 방법을 모르시면 다루지 않겠습니다. , 나가서 왼쪽으로 가면 찾을 수 있습니다. 제가 쓴 기사: Javascript는 PC 웹페이지에서 드래그 앤 드롭 효과를 구현합니다 글은 비교적 명확합니다. 그런 효과를 얻으려면 드롭

정말 간단합니다. 하하. 그러면 모든 사람이 참조용으로 볼 수 있도록 코드를 게시하겠습니다.

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">请按住滑块，拖动到最右边</span></div>
  </div>

자바스크립트:

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;
        
        //非标准设置全局捕获(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 &#63; 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);
    }
    //这里是获取css样式函数
    function getStyle(obj,attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr];  
      }else{
        return getComputedStyle(obj,false)[attr];
      }
    }

  }
 

매개변수 설명:

여기에는 obj, parentNode, bgObj, oTxt, endFn 등 5개의 매개변수가 제공됩니다

obj: 드래그 개체를 나타냅니다

parentNode: 드래그 개체의 활성 영역을 나타내며 일반적으로 부모로 설정됩니다.

bgObj: 드래그 시 배경색 변화를 나타내는 객체

oTxt: 텍스트 변경 개체를 나타냅니다

endFn: 반환 함수, 선택 사항

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.