Bagaimanakah Vue melaksanakan fungsi kotak ulang-alik seret dan lepas? Empat cara untuk berkongsi (dengan kod)

Bagaimana untuk melaksanakan fungsi kotak ulang-alik seret dan lepas dalam projek Vue? Artikel berikut akan berkongsi dengan anda empat cara untuk melaksanakan fungsi kotak ulang-alik seret dan lepas dalam Vue. Saya harap ia akan membantu anda!

1 Gunakan js asli untuk melaksanakan seret dan lepas

Klik untuk membuka video untuk penjelasan lebih terperinci<.>

    
      <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 menggunakan js untuk melaksanakan kotak ulang-alik seret dan lepas

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

Rendering: <.>

3. Vue drag component vuedraggable

ialah pakej komponen standard dan elemen boleh draggable diletakkan di atas

dan animasi peralihan ialah lebih baik. [Cadangan berkaitan: vuedraggabletutorial video vuejstransition-group]

Penggunaan:

Apabila digunakan, anda boleh menggunakan model v untuk melakukan kedua-duanya arah Mengikat data setempat Jika anda perlu mengemas kini atau mencetuskan peristiwa yang dipantau oleh komponen induk, anda boleh memancarkannya dalam kemas kini ().

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

Kes:

<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. Pakej arahan Awe-dnd

Nama pakej npm vue -dragging Ia mengagumkan, bukan menyeret vue Ciri perpustakaan ini ialah ia merangkumi arahan global seret-v, dan kemudian menggunakan arahan global untuk melaksanakan pengikatan data, dsb.

Berbanding dengan vuedraggable, awe-dnd tidak mempunyai pengikatan dua hala (ketiadaan pengikatan dua hala di sini tidak begitu ketat, tepatnya, tidak ada cara untuk mendedahkan pengikatan dua hala), jadi ia menyediakan acara. Ia digunakan untuk mengemas kini senarai apabila menyeret tamat (tidak perlu mengemas kini senarai secara manual, sebenarnya, pengikatan dua hala dilaksanakan secara dalaman) atau untuk mencetuskan peristiwa yang didengari oleh komponen induk.

Kebergantungan pemasangan:

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

main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

Kes:

Jika ia membantu anda, sila klik untuk melompat ke stesen B dengan tiga klik! Terima kasih atas sokongan! ! !

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

(Mempelajari perkongsian video:

pembangunan bahagian hadapan web

, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Bagaimanakah Vue melaksanakan fungsi kotak ulang-alik seret dan lepas? Empat cara untuk berkongsi (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!