Comment utiliser js pour implémenter la fonction glisser-déposer

Cette fois, je vais vous montrer comment utiliser js pour implémenter la fonction glisser-déposer, et quelles sont les précautions à prendre pour utiliser js pour implémenter la fonction glisser-déposer. Ce qui suit est un cas pratique, jetons un coup d'œil.

Si vous souhaitez mettre en place le glisser d'objet, vous devez utiliser trois événements, et l'ordre d'utilisation de ces trois événements ne peut pas être inversé.

1.onmousedown : événement de pression de la souris
2.onmousemove : événement de déplacement de la souris
3.onmouseup : événement de levage de la souris

Le principe de base du glisser est basé sur le mouvement de le déplacement de la souris déplace l'élément glissé. Le mouvement de la souris est le changement des coordonnées x et y ; le mouvement de l'élément est le changement du haut et de la gauche de style.position. Bien entendu, déplacer la souris n'entraîne pas nécessairement le déplacement de l'élément à tout moment. Vous devez plutôt déterminer si le bouton gauche de la souris est enfoncé et s'il est enfoncé sur un élément déplaçable.

L'idée de base est la suivante :

拖拽状态 = 0鼠标在元素上按下的时候{   
  拖拽状态 = 1   
  记录下鼠标的x和y坐标   
  记录下元素的x和y坐标   
  }  
 鼠标在元素上移动的时候{   
  如果拖拽状态是0就什么也不做。   
  如果拖拽状态是1，那么   
  元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
  元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
  }    
 鼠标在任何时候放开的时候{   
  拖拽状态 = 0   
}

Partie de l'exemple de code :

Partie HTML

<p class="calculator" id="drag">**********</p>

Partie CSS

calculator { 
  position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/ 
  display: block; 
  width: 218px; 
  height: 280px; 
  cursor: move;  /*鼠标呈拖拽状*/ 
}

Partie JS

window.onload = function() { 
  //拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup) 
  var drag = document.getElementById('drag'); 
  //点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动) 
  drag.onmousedown = function(e) { 
    var e = e || window.event; //兼容ie浏览器 
    var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 
    var diffY = e.clientY - drag.offsetTop; 
    /*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条， 
      解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法， 
      可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候， 
      限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/ 
      if(typeof drag.setCapture!='undefined'){ 
        drag.setCapture(); 
      } 
    document.onmousemove = function(e) { 
      var e = e || window.event; //兼容ie浏览器 
      var left=e.clientX-diffX; 
      var top=e.clientY-diffY; 
      //控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条 
      if(left<0){ 
        left=0; 
      }else if(left >window.innerWidth-drag.offsetWidth){ 
        left = window.innerWidth-drag.offsetWidth; 
      } 
      if(top<0){ 
        top=0; 
      }else if(top >window.innerHeight-drag.offsetHeight){ 
        top = window.innerHeight-drag.offsetHeight; 
      } 
      //移动时重新得到物体的距离，解决拖动时出现晃动的现象 
      drag.style.left = left+ 'px'; 
      drag.style.top = top + 'px'; 
    }; 
    document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动 
      this.onmousemove = null; 
      this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动） 
      //修复低版本ie bug 
      if(typeof drag.releaseCapture!='undefined'){ 
        drag.releaseCapture(); 
      } 
    }; 
  }; 
};

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

vue crée un téléphone mobile pour envoyer la fonction d'enregistrement du code de vérification par SMS

Comment utiliser Angular pour lancer un composant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!