recherche

Maison >interface Web >Voir.js >Comment Vue implémente-t-il la fonction glisser-déposer de la boîte de navette ? Quatre façons de partager (avec code)

Comment Vue implémente-t-il la fonction glisser-déposer de la boîte de navette ? Quatre façons de partager (avec code)

青灯夜游
青灯夜游avant
2022-10-01 07:00:262433parcourir

Comment implémenter la fonction glisser-déposer de la navette dans le projet Vue ? L'article suivant partagera avec vous quatre façons d'implémenter la fonction glisser-déposer de la boîte de navette dans Vue. J'espère que cela vous sera utile !

Comment Vue implémente-t-il la fonction glisser-déposer de la boîte de navette ? Quatre façons de partager (avec code)

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. VUe utilise js pour implémenter la boîte de navette glisser-déposer 

<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 Vue implémente-t-il la fonction glisser-déposer de la boîte de navette ? Quatre façons de partager (avec code)

3. Composant de glisser Vue vuedraggable

vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group Ci-dessus, l'animation de transition est meilleure. [Recommandations associées : Tutoriel vidéo vuejs]

Utilisation : 

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 aller é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>

Si cela vous aide, veuillez cliquer pour accéder à la station B en un clic et trois liens ! Merci pour le soutien ! ! !

(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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Explication détaillée de l'instruction Vue pour implémenter l'adaptation de la résolution des éléments du grand écranArticle suivant：Explication détaillée de l'instruction Vue pour implémenter l'adaptation de la résolution des éléments du grand écran

Articles Liés

Voir plus