Bagaimana untuk menggunakan Vue untuk melaksanakan fungsi kotak ulang-alik seret dan lepas? Empat cara untuk memperkenalkan

Bagaimana untuk melaksanakan fungsi kotak ulang-alik seret dan lepas? Artikel berikut akan memperkenalkan kepada anda empat cara untuk melaksanakan fungsi kotak ulang-alik seret dan lepas dalam Vue saya harap ia akan membantu anda.

[Cadangan berkaitan: tutorial video vuejs]

1 >

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 > ialah enkapsulasi Komponen standard, dan elemen boleh seret diletakkan di atas , dan animasi peralihan adalah lebih baik.

vuedraggablePenggunaan: transition-group

Apabila digunakan, anda boleh mengikat data setempat dalam dua arah melalui v-model, jika anda perlu mengemas kini atau mencetuskan pemantauan komponen induk Peristiwa boleh dipancarkan dalam kemas kini().

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

Kes:

4. Pakej arahan Awe-dnd

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

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:

main.js

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

Kes:

import VueDND from 'awe-dnd'

Vue.use(VueDND)

(Mempelajari perkongsian video: pembangunan bahagian hadapan web

,

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

Video pengaturcaraan asas

)

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan fungsi kotak ulang-alik seret dan lepas? Empat cara untuk memperkenalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!