【相关推荐：vuejs视频教程】
【资料图】
一、使用原生js实现拖拽
点击打开视频讲解更加详细
Lazyload 按住拖动 <script src="./jquery-3.6.0.min.js"></script> <script> // 获取DOM元素 let dragDiv = document.getElementsByClassName("drag")[0] // 鼠标按下事件 处理程序 let putDown = function (event) { dragDiv.style.cursor = "pointer" 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 = "solid" dragDiv.style.borderColor = "red" dragDiv.style.borderWidth = "3px" // 鼠标移动的时候不停的修改div的left和top值 document.onmousemove = function (event) { dragDiv.style.left = event.clientX - innerX + "px" dragDiv.style.top = event.clientY - innerY + "px" // 边界判断 if (parseInt(dragDiv.style.left) <= 0) { dragDiv.style.left = "0px" } if (parseInt(dragDiv.style.top) <= 0) { dragDiv.style.top = "0px" } if ( parseInt(dragDiv.style.left) >= window.innerWidth - parseInt(dragDiv.style.width) ) { dragDiv.style.left = window.innerWidth - parseInt(dragDiv.style.width) + "px" } if ( parseInt(dragDiv.style.top) >= window.innerHeight - parseInt(dragDiv.style.height) ) { dragDiv.style.top = window.innerHeight - parseInt(dragDiv.style.height) + "px" } } // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件 // 否则鼠标抬起后还可以继续拖拽方块 document.onmouseup = function () { document.onmousemove = null document.onmouseup = null // 清除border dragDiv.style.borderStyle = "" dragDiv.style.borderColor = "" dragDiv.style.borderWidth = "" } } // 绑定鼠标按下事件 dragDiv.addEventListener("mousedown", putDown, false) </script>
登录后复制二、VUe使用js实现拖拽穿梭框
拖拽穿梭框
{{ item.label }} X {{ item.label }} X <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>
登录后复制效果图：
三、Vue 拖拽组件 vuedraggable
vuedraggable是标准的组件式封装，并且将可拖动元素放进了 transition-group上面，过渡动画都比较好。
使用方式：
yarn add vuedraggableimport vuedraggable from "vuedraggable";
登录后复制在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。
案例：
{{ drag ? "拖拽中" : "拖拽停止" }} {{ element.name }} {{ color.text }} <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>
登录后复制四、Awe-dnd指令封装
vue-dragging 的 npm 包的名字是 awe-dnd ，并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。
安装依赖：
npm install awe-dnd --saveyarn add awe-and
登录后复制main.js
import VueDND from "awe-dnd"Vue.use(VueDND)
登录后复制案例：
{{ color.text }} <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>
登录后复制（学习视频分享：web前端开发、编程基础视频）
以上就是如何利用Vue实现拖拽穿梭框功能？四种方式介绍的详细内容，更多请关注php中文网其它相关文章！
