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

Vue实现拖拽穿梭框功能四种方式

经验总结扩展阅读

深度清洁皮肤远离毛孔粗大

复方酸枣仁胶囊作用与效果

富含维生素b3的食物和水果,水果蔬菜中含有维生素B3的有哪些

沐宸谈装修|房子这么贵，别乱装，学她家的“轻装修重装饰”，简洁大方有质感

2022年5月19日领养孩子行吗 2022年5月19日适合领养孩子吗

00后辞职信走红，怒怼老板毫不客气，网友：这届打工人太嚣张

演讲不需要在什么环节注意礼仪?

2019女孩取名100分你还在为起满分名字而烦恼吗？

用啤酒洗头有什么好处美丽秀发这些你要知道

2023年7月哪天领结婚证 2023年7月哪几天适合领证

螨虫|床垫用久成螨虫窝，婆婆教我用这一土方法，把螨虫消除得干干净净！

沃尔沃雾灯怎么开启？

生抽是酱油吗

情话屋|无视反诈警官连麦，被质疑卖勾兑假酒，64岁潘长江直播卖酒惹争议

糯米可以做哪些好吃的糯米可以做什么美食

哪几天出生的人，不到黄河心不死，不达目的不罢休，生意持续红火

伯爵茶与小黄瓜

2023深圳社保缴费比例是多少 2023年深圳社保缴费基数一览

2023年精选感人母亲节祝福语59条

7月初，情缘起，灵魂伴侣悄然而至，一些星座多多留意！