Comment changer la taille des objets en les faisant glisser dans JS

Cet article présente principalement la méthode JS de modification de la taille des objets basée sur le glissement, impliquant des techniques d'implémentation liées à la réponse aux événements javascript et au fonctionnement dynamique des attributs des éléments de page. Les amis dans le besoin peuvent s'y référer

Ceci. L'article décrit les exemples JS implémente la méthode de modification de la taille des objets en fonction du glissement. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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

est principalement mis en œuvre en trois étapes :

1 Obtenez deux ps, grands et petits, via l'id
2. . Ajoutez onmousedown au petit p Event
3. Ajoutez onmousedown et onmouseup événements

onmousedown

🎜>Comme le montre le diagramme d'analyse, il suffit d'obtenir la valeur de largeur croissante de l'objet lors du glisser, et le problème est résolu

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

Ajouter 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>

Code d'implémentation js :

<script>
  window.onload = function () {
    // 1. 获取两个大小p
    var oPanel = document.getElementById(&#39;panel&#39;);
    var oDragIcon = document.getElementById(&#39;dragIcon&#39;);
    // 定义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 +&#39;px&#39;;// 拖拽后物体的宽
        oPanel.style.height = H +&#39;px&#39;;// 拖拽后物体的高
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
</script>

Rendu :

Ce qui précède est ce que j'ai compilé pour tout le monde. J’espère qu’il sera utile à tout le monde à l’avenir.

Articles associés :

Comment implémenter une barre de progression dynamique dans D3.js

Implémentation de la boîte modale dans vue (méthode d'écriture générale)

Comment créer un environnement webApp dans Vue.js 2.0 et le développement Cordova

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!