Vue实现拖拽穿梭框功能四种方式
Posted 格格巫 MMQ!!
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue实现拖拽穿梭框功能四种方式相关的知识，希望对你有一定的参考价值。
一、使用原生js实现拖拽
123
<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="./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>
</body>
二、VUe使用js实现拖拽穿梭框
<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>
效果图：
三、Vue 拖拽组件 vuedraggable
vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。
使用方式：
yarn add vuedraggable
import vuedraggable from ‘vuedraggable’;
在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。
案例：
<div> drag ? "拖拽中" : "拖拽停止" </div>
<!--使用draggable组件-->
<draggable
v-model="myArray"
chosenClass="chosen"
forceFallback="true"
group="people"
animation="1000"
@start="onStart"
@end="onEnd"
>
<transition-group>
<div class="item" v-for="element in myArray" :key="element.id">
element.name
</div>
</transition-group>
</draggable>
<div class="color-list">
<div
class="color-item"
v-for="color in colors"
v-dragging=" item: color, list: colors, group: 'color' "
:key="color.text"
>
color.text
</div>
</div>
相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。
安装依赖：
npm install awe-dnd --save
yarn add awe-and
main.js
import VueDND from ‘awe-dnd’
Vue.use(VueDND)
案例：
以上是关于Vue实现拖拽穿梭框功能四种方式的主要内容，如果未能解决你的问题，请参考以下文章
如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索