Maison >interface Web >js tutoriel >Code d'implémentation de l'effet glisser-déposer du module vue
Le contenu de cet article concerne le code d'implémentation de l'effet glisser-déposer du module vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
On m'a posé des questions sur la mise en œuvre de l'effet glisser-déposer lors d'une interview précédente
Au cours de l'entretien de cette époque, j'ai simplement répondu à la méthode et à la logique de mise en œuvre.
Maintenant que je n'ai plus rien à faire, j'ai mis en œuvre cette chose.
Le principe est très simple et il est très pratique à écrire.
Axé sur les données, créez un tableau, la longueur initiale du tableau est de 1
Lorsque le glisser est déclenché, ajoutez un objet au tableau, l'objet avec l'indice 0 est déplacé et le le nouveau est également de le laisser dans sa position d'origine et d'attendre le prochain glissement.
Sans plus attendre, voici le code
<template> <div> <div @mousedown="move($event,index)" v-for="(x,index) in i"> <span v-if="index+1 !== i.length">{{index+1}}</span> <input v-model="x.input"> </div> {{i}} </div> </template> <script> export default { name: "index", data(){ return{ positionX:0, positionY:0, i:[ {input:''} ] } }, methods:{ move(e,x){ let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; let flag = true; document.onmousemove = (e)=>{ //鼠标按下并移动的事件 if(flag && x === this.i.length-1){ flag = false; this.i.push({input:''}) } //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //绑定元素位置到positionX和positionY上面 this.positionX = top; this.positionY = left; //移动当前元素 odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; } } } </script> <style scoped> .view{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #f8f8f8; .x{ width: 250px; height: 50px; top: 50px; left: 10px; position: absolute; background: red; color: yellow; } } </style>
Une démo simple qui pourra être enrichie par la suite, comme déclencher des événements en faisant glisser la longueur.
L'entrée peut être remplacée par des sous-composants. Nous fournissons ici une implémentation de bas niveau
l'entrée peut être remplacée par un sous-composant. Voici une implémentation de bas niveau
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!