Vue实现拖拽穿梭框功能四种方式实例详解
目录
- 一、使用原生js实现拖拽
- 二、VUe使用js实现拖拽穿梭框
- 三、Vue 拖拽组件 vuedraggable
- 四、Awe-dnd指令封装
一、使用原生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="./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>
</html>
二、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 拖拽组件 vuedraggable
vuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。
使用方式：
yarn add vuedraggable import vuedraggable from 'vuedraggable';
在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。
案例：
<template>
<div>
<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>
</div>
</template>
<style scoped>
/*被拖拽对象的样式*/
.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>
四、Awe-dnd指令封装
vue-dragging 的 npm 包的名字是 awe-dnd ，并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说， awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。
安装依赖：
npm install awe-dnd --save yarn add awe-and
main.js
import VueDND from 'awe-dnd' Vue.use(VueDND)
案例：
<template>
<div>
<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>
</div>
</template>
<style scoped>
/*被拖拽对象的样式*/
.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>
到此这篇关于Vue实现拖拽穿梭框功能四种方式的文章就介绍到这了,更多相关vue拖拽穿梭框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue 实现穿梭框功能的详细代码
Vue - 实现穿梭框功能,效果图如下所示: css .transfer{ display: flex; justify-content: center; align-items: center; } .transfer>.list { width: 200px; height: 300px; border: 1px solid #000; list-style: none; } .content{ font-size: 30px; margin: 0 20px; } .list>li{ pa
-
VUE Elemen-ui之穿梭框使用方法详解
本文实例为大家分享了VUE Elemen-ui之穿梭框使用方法,供大家参考,具体内容如下 背景: 现在需要使用穿梭框实现,角色的操作功能 需要使用 Element Transfer 穿梭框 HTML代码: <template> <el-card class="box-card" shadow="never" style="height: 700px;"> <div slot="header" cl
-
手写可拖动穿梭框组件CustormTransfer vue实现示例
目录 本文内容 最终效果图 组件html布局 穿梭框左侧内容 穿梭框右侧内容 穿梭框中间向左.向右按钮 把排序好的穿梭数据传给父组件 整体代码 小结 本文内容 需求是实现类似 el-transfer的组件,右侧框内容可以拖动排序: 手写div样式 + vuedraggable组件实现. 最终效果图 组件html布局 新建一个组件文件 CustormTransfer.vue,穿梭框 html 分为左中右三部分,使用flex布局使其横向布局,此时代码如下 <template> <div cl
-
vue穿梭框实现上下移动
本文实例为大家分享了vue穿梭框实现上下移动的具体代码,供大家参考,具体内容如下 使用elementUI的树形组件 tree组件 功能需求: 1.左侧的子节点移动到右侧的表格中 2.右侧选中的内容移动到左侧树中,单一移动和全部移动 3.点击右侧节点实现上下移动 首先会遇到的问题可能是如何实现左侧只让子节点显示checkbox,我这边是根据后端返回了一个参数来判断是否是父节点(其实只要后端给父节点加一个nocheck=true就可以) // setLeftAgency :封装好的请求接口名称 se
-
vue3+typeScript穿梭框的实现示例
前言 实现功能:模仿element穿梭框的简单功能 每周分享一个vue3+typeScript的小组件,我只想分享下自己的实现思路,楼主是个菜鸡前端,记录下实现过程,说不定对你有帮助. 效果展示 预览地址 github地址 开发过程 思路:用两个数组分别记录左右框框里面的值,根据复选框选中状态来实现删除增加即可 html部分 <div class="shuttle"> <!-- 左边列表 --> <div class="shuttle-box&q
-
基于Vue实现树形穿梭框的示例代码
Vue 项目里面需要一个树形的穿梭框,但是 elementUI 和 ant-d 组件库的穿梭框组件效果都不是很好,因为源列表和目标列表都是需要树形结构的,所以说这个就很难搞,但是也不怕,因为大佬太多了,有插件可以提供给我们使用,接下来介绍一下这个插件. 树形穿梭框插件 el-tree-transfer 这个插件很好的实现了vue项目树形穿梭框的功能. 安装链接 上面的连接是npm插件地址,安装步骤也很简单. npm install el-tree-transfer --save 或者 npm i
-
Vue实现拖拽穿梭框功能四种方式实例详解
目录 一.使用原生js实现拖拽 二.VUe使用js实现拖拽穿梭框 三.Vue 拖拽组件 vuedraggable 四.Awe-dnd指令封装 一.使用原生js实现拖拽 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue;
-
C#获取本地IP的四种方式示例详解
1.第一种方式 采用System.Net.Dns的GetHostAddress的方式,具体请看代码: /// <summary> /// 网络不通畅可以获取 /// 不过能获取到具体的IP /// </summary> /// <returns></returns> public static List<IPAddress> GetByGetHostAddresses() { try { IPAddress[] adds = Dns.GetHos
-
JavaScript 对象的四种方式比较详解
目录 前言 1. 引用比较 2. 手动比较 3. 浅层比较 4. 深层比较 5. 总结 前言 比较 JavaScript 中的值非常简单,只需用相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化的数据,所以比较起来比较困难.在本文中,你将学习如何正确比较 JavaScript 中的对象. 1. 引用比较 JavaScript 提供了 3 种方法来对值进行比较: 严格相等运算符 === 宽松相等运算符
-
Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t
-
C#开启线程的四种方式示例详解
一.异步委托开启线程 public static void Main(string[] args){ Action<int,int> a=add; a.BeginInvoke(3,4,null,null);//前两个是add方法的参数,后两个可以为空 Console.WriteLine("main()"); Console.ReadKey(); } static void add(int a,int b){ Console.WriteLine(a+b); } 运行结果: 如
-
Java多线程实现四种方式原理详解
1.继承Thread类,重写run方法 2.实现Runnable接口,重写run方法,实现Runnable接口的实现类的实例对象作为Thread构造函数的target 3.通过Callable和FutureTask创建线程 4.通过线程池创建线程 前面两种可以归结为一类:无返回值,原因很简单,通过重写run方法,run方式的返回值是void,所以没有办法返回结果 后面两种可以归结成一类:有返回值,通过Callable接口,就要实现call方法,这个方法的返回值是Object,所以返回的结果可以放
-
JSP中九大内置对象和四种属性范围详解
JSP中九大内置对象和四种属性范围详解 一般对象需要实例化才可以调用,而JSP的内置对象是不用实例化就可以直接调用的对象. 总共有9个,对应如下表: 序号 对象 类型 1 pageContext javax.servlet.jsp.PageContext 2 request javax.servlet.http.HttpServletRequest 3 response javax.servlet.http.HttpServletResponse 4 session javax.servlet.
-
web前端vue之vuex单独一文件使用方式实例详解
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个
-
iOS新功能引导提示界面实例详解
在开发中,现在很多app更新了新功能时都会给出用户一个提示,以方便用户更好的体验,那么这个功能如何实现的呢? 首先看下效果图: 1.首先创建第一个viewcontroller 在上面放上一个imageview和一个按钮 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIImageView *imageview=[[UIImageView alloc]ini
-
vue服务端渲染页面缓存和组件缓存的实例详解
vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===