Exemples d'applications JavaScript par glisser-déposer_compétences Javascript

L'idée de base du glisser-déposer a également été abordée dans l'article précédent. Maintenant que nous avons la théorie, qu'en est-il de la pratique ? Où peut-elle être appliquée ? Ci-dessous, je vais vous présenter un petit exemple écrit en utilisant la pensée glisser-déposer pour votre référence. L'effet approximatif peut être vu dans l'image ci-dessous :

.

C'est une simple barre de déplacement. Vous pouvez la comprendre comme une barre de défilement, un contrôle de sélection de quantité dans un formulaire, une barre de progression, etc. Quoi qu'il en soit, vous pouvez la changer en plusieurs. Sans plus tarder, voyons comment cela se produit. c'est fait !

Après réflexion, je pense qu'il n'est pas nécessaire d'expliquer le principe. Je l'ai déjà dit très clairement dans l'effet glisser. Les étudiants qui ne sont pas sûrs peuvent sortir et tourner à gauche pour voir un petit exemple de javascript. et faites un glisser-déposer sur une page web d'un PC. Je posterai le code directement :

.

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;
         
        //非标准设置全局捕获(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"){ //横向
            var left = ev.clientX - disX;
            //左侧
            if(left <= 0){
              left = 0;
            }else if(left > pWidth - oWidth){//右侧
              left = pWidth - oWidth;
            };
            obj.style.left = bgObj.style.width = left + 'px';
            oNum.innerHTML = left;
             
          }else if(attr == "top"){ //竖向
            var top = ev.clientY - disY;
             //上面
            if(top <= 0){
              top = 0;
            }else if(top > pHeight - oHeight){//下面
              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();
          //非标准释放全局捕获(IE)
          if(obj.releaseCapture){
            obj.releaseCapture()  
          };
 
        };
        return false;
      }; 
    } 
   
  }

Description du paramètre :

Cinq paramètres sont donnés ici, respectivement obj, parentNode, bgObj, attr, endFn :

obj : l'objet glissé

parentNode : un objet qui limite la zone active de l'objet glissé, généralement défini sur son parent

bgObj : objet de couleur d'arrière-plan lors du déplacement

attr : 2 paramètres à gauche, en haut, indiquant s'il faut glisser horizontalement ou verticalement

endFn : Fonction de retour, elle sera exécutée si elle existe, sinon elle ne sera pas exécutée, facultatif

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.