JS utilise des événements de glisser pour modifier la taille des objets

Cette fois, je vais vous apporter les précautions concernant l'utilisation des événements glisser pour modifier la taille des objets dans JS. Jetons un coup d'œil à ce qui suit.

Fonction Faites glisser pour changer la taille de l'objet : faites glisser le petit p jaune pour modifier la largeur et la hauteur du grand p vert

La mise en œuvre principale se compose de trois étapes :

1. Obtenez la taille de deux p
via l'identifiant. 2. Ajoutez l'événement onmousedown au petit p
3. Ajoutez le onmousedown event to document ajoute onmousemove et onmouseup événements

À partir du diagramme d'analyse, nous pouvons voir qu'il suffit d'obtenir la valeur de largeur croissante de l'objet lors du déplacement, et le problème est résolu

<p id="panel">
  <p id="dragIcon"></p>
</p>

Ajoutez quelques styles

<style>
    #panel{
      position: absolute;
      width: 200px;height: 200px;
      background: green;
    }
    #dragIcon{
      position: absolute;bottom: 0;right: 0;
      width: 20px;height: 20px;
      background: yellow;
    }
</style>

js :

<script>
  window.onload = function () {
    // 1. 获取两个大小p
    var oPanel = document.getElementById('panel');
    var oDragIcon = document.getElementById('dragIcon');
    // 定义4个变量
    var disX = 0;//鼠标按下时光标的X值
    var disY = 0;//鼠标按下时光标的Y值
    var disW = 0; //拖拽前p的宽
    var disH = 0; // 拖拽前p的高
    //3. 给小p加点击事件
    oDragIcon.onmousedown = function (ev) {
      var ev = ev || window.event;
      disX = ev.clientX; // 获取鼠标按下时光标x的值
      disY = ev.clientY; // 获取鼠标按下时光标Y的值
      disW = oPanel.offsetWidth; // 获取拖拽前p的宽
      disH = oPanel.offsetHeight; // 获取拖拽前p的高
      document.onmousemove = function (ev) {
        var ev = ev || window.event;
        //拖拽时为了对宽和高 限制一下范围，定义两个变量
        var W = ev.clientX - disX + disW;
        var H = ev.clientY - disY + disH;
        if(W<100){
          W = 100;
        }
        if(W>800){
          W =800;
        }
        if(H<100){
          H = 100;
        }
        if(H>500){
          H = 500;
        }
        oPanel.style.width =W +'px';// 拖拽后物体的宽
        oPanel.style.height = H +'px';// 拖拽后物体的高
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
</script>

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 :

Explication détaillée des étapes pour obtenir un effet de défilement transparent avec vue.js

Implémentation du serveur React rendu Explication détaillée des étapes

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!