1. 首頁 > 生活百科 > >

Vue實現拖拽穿梭框功能四種方式

生活百科

一、使用原生js實現拖拽點擊打開視頻講解更加詳細
<html lang="en">    <head>      <meta charset="UTF-8" />      <title>Lazyload</title>      <style>        .drag {          background-color: skyblue;          position: absolute;          line-height: 100px;          text-align: center;          width: 100px;          height: 100px;        }      </style>    </head>    <body>      <!-- left和top要寫在行內樣式里面 -->      <div class="drag" style="left: 0; top: 0">按住拖動</div>      <script src=https://www.huyubaike.com/biancheng/"./jquery-3.6.0.min.js"> 二、VUe使用js實現拖拽穿梭框<template>  <div>    <h3 style="text-align: center">拖拽穿梭框</h3>    <div id="home" @mousemove="mousemove($event)">      <div class="tree-select-content">        <span          class="select-content"          :id="'mouse' + index"          v-for="(item, index) in leftData"          :key="item.id"          @mousedown="mousedown(index, 1)"          @mouseup="mouseup(item, 1, index)"        >          <span class="select-text">{{ item.label }}</span>          <span class="select-text-X" @click="handerClickX(item, index, 1)"            >X</span          >        </span>      </div>      <div class="tree-select-content">        <span          class="select-content"          :id="'deleteMouse' + index"          v-for="(item, index) in rightData"          :key="item.id"          @mousedown="mousedown(index, 2)"          @mouseup="mouseup(item, 2, index)"        >          <span class="select-text">{{ item.label }}</span>          <span class="select-text-X" @click="handerClickX(item, index, 2)"            >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 scoped>#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>

推薦閱讀