recherche

Maison  >  Article  >  interface Web  >  Comment utiliser Vue pour implémenter la fonction glisser-déposer de la navette ? Quatre façons de présenter

Comment utiliser Vue pour implémenter la fonction glisser-déposer de la navette ? Quatre façons de présenter

青灯夜游
青灯夜游avant
2022-10-18 20:40:522188parcourir

Comment implémenter la fonction glisser-déposer de la boîte de navette ? L'article suivant vous présentera les quatre méthodes de Vue pour implémenter la fonction glisser-déposer de la boîte de navette. J'espère que cela vous sera utile.

Comment utiliser Vue pour implémenter la fonction glisser-déposer de la navette ? Quatre façons de présenter

[Recommandations associées : Tutoriel vidéo vuejs]

1. Utilisez js natif pour implémenter le glisser-déposer

Cliquez pour ouvrir la vidéo pour une explication plus détaillée

    
      <meta>
      <title>Lazyload</title>
      <style>
        .drag {
          background-color: skyblue;
          position: absolute;
          line-height: 100px;
          text-align: center;
          width: 100px;
          height: 100px;
        }
      </style>
    
    
      <!-- left和top要写在行内样式里面 -->
      <div>按住拖动</div>
      <script></script>
      <script>
        // 获取DOM元素
        let dragDiv = document.getElementsByClassName(&#39;drag&#39;)[0]
        // 鼠标按下事件 处理程序
        let putDown = function (event) {
          dragDiv.style.cursor = &#39;pointer&#39;
          let offsetX = parseInt(dragDiv.style.left) // 获取当前的x轴距离
          let offsetY = parseInt(dragDiv.style.top) // 获取当前的y轴距离
          let innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
          let innerY = event.clientY - offsetY // 获取鼠标在方块内的y轴距
          // 按住鼠标时为div添加一个border
          dragDiv.style.borderStyle = &#39;solid&#39;
          dragDiv.style.borderColor = &#39;red&#39;
          dragDiv.style.borderWidth = &#39;3px&#39;
          // 鼠标移动的时候不停的修改div的left和top值
          document.onmousemove = function (event) {
            dragDiv.style.left = event.clientX - innerX + &#39;px&#39;
            dragDiv.style.top = event.clientY - innerY + &#39;px&#39;
            // 边界判断
            if (parseInt(dragDiv.style.left) <= 0) {
              dragDiv.style.left = &#39;0px&#39;
            }
            if (parseInt(dragDiv.style.top) <= 0) {
              dragDiv.style.top = &#39;0px&#39;
            }
            if (
              parseInt(dragDiv.style.left) >=
              window.innerWidth - parseInt(dragDiv.style.width)
            ) {
              dragDiv.style.left =
                window.innerWidth - parseInt(dragDiv.style.width) + &#39;px&#39;
            }
            if (
              parseInt(dragDiv.style.top) >=
              window.innerHeight - parseInt(dragDiv.style.height)
            ) {
              dragDiv.style.top =
                window.innerHeight - parseInt(dragDiv.style.height) + &#39;px&#39;
            }
          }
          // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
          // 否则鼠标抬起后还可以继续拖拽方块
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
            // 清除border
            dragDiv.style.borderStyle = &#39;&#39;
            dragDiv.style.borderColor = &#39;&#39;
            dragDiv.style.borderWidth = &#39;&#39;
          }
        }
        // 绑定鼠标按下事件
        dragDiv.addEventListener(&#39;mousedown&#39;, putDown, false)
      </script>
    
  

2. Utilisations de VUe js pour implémenter la navette glisser-déposer Frame 

<template>
  <div>
    <h3>拖拽穿梭框</h3>
    <div>
      <div>
        <span>
          <span>{{ item.label }}</span>
          <span>X</span>          >
        </span>
      </div>
      <div>
        <span>
          <span>{{ item.label }}</span>
          <span>X</span>          >
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      leftData: [
        { label: "首页", id: 1 },
        { label: "咨询", id: 2 },
        { label: "生活", id: 3 },
        { label: "财富", id: 4 },
        { label: "我的", id: 5 },
      ],
      rightData: [{ label: "世界", id: 6 }],
      isMoveTrue: false,
      isMove: false,
      moveId: "",
    };
  },
  mounted() {},
  components: {},
  methods: {
    mousedown(index, val) {
      this.isMoveTrue = true;
      if (val == 1) {
        this.moveId = "mouse" + index;
      } else {
        this.moveId = "deleteMouse" + index;
      }
    },
    mousemove(event) {
      if (this.isMoveTrue) {
        this.isMove = true;
        document.getElementById(this.moveId).style.position = "absolute";
        document.getElementById(this.moveId).style.top = event.clientY + "px";
        document.getElementById(this.moveId).style.left = event.clientX + "px";
        document.getElementById(this.moveId).style.transform =
          "translate(-50%,-50%)";
      }
    },
    mouseup(item, val, index) {
      if (!this.isMove) {
        this.isMoveTrue = false;
        this.moveId = "";
      }
      if (this.isMoveTrue && val == 2) {
        this.$nextTick(() => {
          this.rightData.splice(index, 1);
          this.leftData.push(item);
        });
      } else if (this.isMoveTrue && val) {
        this.leftData.splice(index, 1);
        this.rightData.push(item);
      }
      document.getElementById(this.moveId).style.display = "none";
      this.isMoveTrue = false;
      this.isMove = false;
      this.moveId = "";
    },
    handerClickX(item, index, val) {
      if (val == 1) {
        this.leftData.splice(index, 1);
        this.rightData.push(item);
      } else {
        this.rightData.splice(index, 1);
        this.leftData.push(item);
      }
    },
  },
};
</script>

<style>
#home {
  display: flex;
  justify-content: space-around;
}
.tree-select-content {
  width: 40%;
  height: 300px;
  background: #f9faff;
  border: 1px solid #dee0ec;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
}
.select-content {
  width: max-content;
  height: 20px;
  padding: 1.6%;
  border: 1px solid #d6dbed;
  margin: 2% 1% 0;
  background: #ffffff;
  box-shadow: 0 0 8px 0 rgba(72, 119, 236, 0.1);
  border-radius: 4px;
}
.select-content:hover span {
  color: #4877ec;
}
.select-content:hover {
  cursor: pointer;
  background: #f8faff;
  border: 1px solid #3e75f4;
}
.select-text {
  font-size: 15px;
  color: #2e2f36;
  text-align: center;
  font-weight: 400;
}
.select-text-X {
  font-size: 15px;
  color: #4877ec;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 12px;
  cursor: pointer;
}
</style>

Rendu :

Comment utiliser Vue pour implémenter la fonction glisser-déposer de la navette ? Quatre façons de présenter

3. Composant de glisser Vue vuedraggable

vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group Ci-dessus, l'animation de transition est meilleure.

Comment utiliser : 

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

Lors de son utilisation, vous pouvez utiliser v-model pour lier des données locales dans deux directions. Si vous devez mettre à jour ou déclencher des événements surveillés par le composant parent, vous pouvez émettre dans update(). .

Cas : 

<template>
  <div>
    <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div>
    <!--使用draggable组件-->
    <draggable>
      <transition-group>
        <div>
          {{ element.name }}
        </div>
      </transition-group>
    </draggable>
    <div>
      <div>
        {{ color.text }}
      </div>
    </div>
  </div>
</template>
  <style>
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}
</style>
  <script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      myArray: [
        { people: "cn", id: 10, name: "www.itxst.com" },
        { people: "cn", id: 20, name: "www.baidu.com" },
        { people: "cn", id: 30, name: "www.taobao.com" },
        { people: "us", id: 40, name: "www.yahoo.com" },
      ],
      colors: [
        {
          text: "Aquamarine",
        },
        {
          text: "Hotpink",
        },
        {
          text: "Gold",
        },
        {
          text: "Crimson",
        },
        {
          text: "Blueviolet",
        },
        {
          text: "Lightblue",
        },
        {
          text: "Cornflowerblue",
        },
        {
          text: "Skyblue",
        },
        {
          text: "Burlywood",
        },
      ],
    };
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  },
};
</script>

4. Encapsulation de l'instruction Awe-dnd

vue-dragging Le nom du package npm est awe-dnd, pas vue-dragging La caractéristique de cette bibliothèque est qu'elle encapsule le v. -faire glisser des instructions globales, puis utiliser des instructions globales pour effectuer la liaison de données, etc.

Par rapport à vuedraggable, awe-dnd n'a pas de liaison bidirectionnelle (l'absence de liaison bidirectionnelle ici n'est pas très rigoureuse, pour être précis, il n'y a aucun moyen d'exposer la liaison bidirectionnelle), il fournit donc des événements , qui sont utilisés à la fin du glissement Lorsqu'ils sont utilisés pour mettre à jour la liste (pas besoin de mettre à jour manuellement la liste, en fait, la liaison bidirectionnelle est implémentée en interne) ou pour déclencher des événements écoutés par le composant parent.

Dépendances d'installation : 

npm install awe-dnd --save
yarn add awe-and

main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

Cas : 

<template>
  <div>
    <div>
      <div>
        {{ color.text }}
      </div>
    </div>
  </div>
</template>
<style>
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}
</style>
<script>
export default {
  data() {
    return {
      drag: false,
      colors: [
        {
          text: "Aquamarine",
        },
        {
          text: "Hotpink",
        },
        {
          text: "Gold",
        },
        {
          text: "Crimson",
        },
        {
          text: "Blueviolet",
        },
        {
          text: "Lightblue",
        },
        {
          text: "Cornflowerblue",
        },
        {
          text: "Skyblue",
        },
        {
          text: "Burlywood",
        },
      ],
    };
  },
  methods: {},
};
</script>

(Partage de vidéos d'apprentissage : développement web front-end, Vidéo de programmation de base)

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!

npm 封装 JS 事件 transition
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：[Compilation et résumé] 20 questions d'entretien Vue à haute fréquenceArticle suivant：[Compilation et résumé] 20 questions d'entretien Vue à haute fréquence

Articles Liés

Voir plus