Maison > interface Web > js tutoriel > Vue implémente l'effet glisser-déposer (avec code)

Vue implémente l'effet glisser-déposer (avec code)

php中世界最好的语言
Libérer: 2018-05-15 11:00:50
original
1957 Les gens l'ont consulté

Cette fois, je vais vous présenter Vue pour implémenter l'effet glisser-déposer (avec code). Quelles sont les précautions pour que Vue implémente l'effet glisser-déposer Voici un cas pratique, jetons un coup d'œil. .

Rendu

demo1.gif

Effacer la différence entre clientY pageY écranY coucheY offsetY

Lorsque nous voulons créer l'effet de glissement, nous devons distinguer les différences entre ces attributs. Ces attributs sont tous utilisés pour calculer la valeur de décalage du clic de souris. Nous devons les comprendre avant de pouvoir continuer à implémenter notre glisser. effect

clientY fait référence à la distance depuis le coin supérieur gauche de la page visible
pageY fait référence à la distance depuis le coin supérieur gauche de la page visible (non affecté par le défilement de la page)
screenY fait référence to Est la distance depuis le coin supérieur gauche de l'écran
layerY fait référence à la distance jusqu'au coin supérieur gauche le plus proche de celui-ci ou de son élément parent qui a un positionnement
offsetY fait référence à la distance depuis son propre coin supérieur gauche
Une bande d'images Comprenons brièvement la différence entre

Après avoir une brève compréhension de ces attributs, il y a plusieurs attributs qui doivent être distingués.


     相同点
不同点
clientY 距离页面左上角距离 受页面滚动的影响
pageY 距离页面左上角的距离 不受页面滚动影响
Points similaires
Points différents
clientY Distance du en haut à gauche de la page Distance angulaire Affecté par le défilement de la page
pageY La distance depuis le coin supérieur gauche de la page Non affecté par le défilement des pages
Mêmes points tbody >
Différences
coucheY La distance depuis le coin supérieur gauche du element Sous réserve de l'effet du positionnement sera de trouver le coin supérieur gauche du premier élément positionné à partir de cet élément vers le haut
offsetY La distance depuis le coin supérieur gauche de l'élément
offsetY La distance depuis le coin supérieur gauche de l'élément
td> calcule le coin supérieur gauche par rapport à cet élément, quels que soient les problèmes de positionnement, et calcule le point d'intersection interne. Il s'agit d'un attribut unique du navigateur IE
相同点 不同点
layerY 距离元素的左上角距离 受元素的定位的影响,会从本元素往上找到第一个定位的元素的左上角
offsetY 距离元素左上角的距离 计算相对于本元素的左上角,不在乎定位问题,计算的是内交点。是IE浏览器的特有属性

La différence entre layerY et offsetY

Implémentation de la fonction glisser-déposer

Maintenant que nous sommes familiers avec ces moyens d'attribut de décalage, nous arrivons alors à notre objectif. Sans plus tarder, passons directement au code

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>
<body>
  <p id="app" @mousedown="move">    <!--绑定按下事件-->
    {{positionX}}
    {{positionY}}
  </p>
</body>
//main.js
let app = new Vue({
  el:'#app',
  data:{
    positionX:0,
    positionY:0,
  },
  methods:{
    move(e){
      let op = e.target;    //获取目标元素
      
      //算出鼠标相对元素的位置
      let disX = e.clientX - op.offsetLeft;
      let disY = e.clientY - op.offsetTop;
      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
        let left = e.clientX - disX;  
        let top = e.clientY - disY;
        
        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;
        
        //移动当前元素
        op.style.left = left + 'px';
        op.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }  
  
  },
  computed:{},
});
Copier après la connexion

Bien sûr, nous pouvons le lier comme une instruction personnalisée, afin qu'il puisse être utilisé dans le forme d'une instruction d'appel Pour obtenir l'effet glisser-déposer, voici le code qui définit l'instruction personnalisée

// darg.html

<style>
  #app{
    position: relative;   /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    background: #666;    /*设置一下背景*/
  }
</style>
<body>
  <p id="app" v-drag>    <!--实现用指令形式实现拖拽效果-->
    
  </p>
</body>
//main.js
let app = new Vue({
  el:'#app',
  data:{},
  methods:{},
  directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
        let op = el;  //获取当前元素
        op.onmousedown = (e) => {
          //算出鼠标相对元素的位置
          let disX = e.clientX - op.offsetLeft;
          let disY = e.clientY - op.offsetTop;
          
          document.onmousemove = (e)=>{
            //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;
           
            //绑定元素位置到positionX和positionY上面
            this.positionX = top;
            this.positionY = left;
        
            //移动当前元素
            op.style.left = left + 'px';
            op.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
});
Copier après la connexion

Enfin

À ce stade, nous avons déjà mis l'effet glisser-déposer. Il a été implémenté à l'aide de Vue. Nous avons utilisé deux méthodes différentes pour implémenter le glisser-déposer, mais en fait, nous devons clarifier les différences entre pageY, screenY, clientY, layerY, offsetY, etc. Bien sûr, nous avons également appris certaines méthodes de Vue, comme les instructions personnalisées.

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 de la fonction fixe flottante supérieure lors du glissement avec vue+jquery+lodash

Vue implémente le composant PopupWindow Utiliser les étapes pour analyser

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal