当前位置: 首页 > news >正文

vue.draggable浅尝

介绍

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子,使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。

官方网站 

https://github.com/SortableJS/Vue.Draggable

npm或yarn 安装方式

yarn add vuedraggable
npm i -S vuedraggable 

UMD浏览器直接引用JS方式

<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

属性说明

属性名称说明
group :group= "name",相同的组之间可以相互拖拽
或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] }
sort:sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序,在其他组可以拖动排序
delay:delay= "0", 鼠标按下后多久可以拖拽
touchStartThreshold鼠标移动多少px才能拖动元素
disabled:disabled= "true",是否启用拖拽组件
animation拖动时的动画效果,还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle :handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动
filter:filter=".unmover" 设置了unmover样式的元素不允许拖动
draggable:draggable=".item" 那些元素是可以被拖动的
ghostClass:ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
chosenClass:ghostClass="hostClass" 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
dragClass:dragClass="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
dataIdAttrdataIdAttr: 'data-id'
forceFallback默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,你要自定义ghostClass chosenClass dragClass样式时,建议forceFallback设置为true
fallbackClass默认false,克隆的DOM元素的类名
allbackOnBody默认false,克隆的元素添加到文档的body中
fallbackTolerance拖拽之前应该移动的px
scroll默认true,有滚动区域是否允许拖拽
scrollFn滚动回调函数
scrollSensitivity距离滚动区域多远时,滚动滚动条
scrollSpeed滚动速度

完整例子

html

<div id="app"><div>{{drag?'拖拽中':'拖拽停止'}}</div><draggable v-model="myArray" chosen-class="chosen" force-fallback="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>

css 

.item {padding: 6px;background-color: #fdfdfd;border: solid 1px #eee;margin-bottom: 10px;cursor: move;&:hover {background-color: #f1f1f1;cursor: move;}
}.chosen {border: solid 2px #3089dc !important;
}

js 

// 全局注册组件
new Vue({el: '#app',data() {return {drag: false,myArray: [{ people: 'cn', id: 1, name: 'www.itxst.com',sort: false },{ people: 'cn', id: 2, name: 'www.baidu.com' },{ people: 'cn', id: 3, name: 'www.taobao.com' },{ people: 'us', id: 4, name: 'www.google.com' }]};},methods: {onStart() {this.drag = true;},onEnd() {this.drag = false;}}
})

成果

在线尝试

两列或多列之间相互拖动

vue.draggable作为一款强大的vue拖拽组件,可以满足呢对网页上元素的拖拽需求,本文将介绍两两列或多列之间相互拖动,比如把某些角色或用户拖拽到每个权限组实现一些比较炫酷的效果。 

 

关键点group属性

//两列组件设置相同的group名就可以相互拖拽了
<draggable v-model="arr1" group="site"><transition-group><div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div></transition-group>
</draggable>//group属性:
//设置方式一,直接设置组名
group:'itxst'
//设置方式,object,也可以通过自定义函数function实现复杂的逻辑
group:{name:'itxst',//组名为itxstpull:true|false|function,//是否允许拖入当前组put:true|false|function,//是否允许拖出当前组
}

在线试一试

拖入空数组的问题

//当有个数组为空时,需要设置 transition-group 的高度才能拖入这个空数组
//style 等于 min-height:120px;display: block;<draggable v-model="arr2" group="site" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd"><transition-group :style="style"><div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div></transition-group>
</draggable>

在线试一试

控制A组只能拖出不能拖入

 <draggable v-model="arr1" :group="grpupA"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd"><transition-group :style="style"><div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div></transition-group>
</draggable> 
//设置:group="grpupA"只能拖出grpupA:{name:'site',pull:true,put:false}

在线试一试

完整代码

<template><div> 
<!--使用draggable组件-->
<div class="itxst">
<div class="col"><div class="title" >把下面元素拖拽到B组试试看</div><draggable v-model="arr1" :group="groupA"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd"><transition-group :style="style"><div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div></transition-group>
</draggable> </div><div  class="col"><div class="title" >B组(本组是个空数组)</div><draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd"><transition-group :style="style"><div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div></transition-group>
</draggable> </div></div></div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {//注册draggable组件components: {draggable,},data() {return {drag:false,groupA:{name:'site',pull:true, //可以拖从put:true//可以拖出},groupB:{name:'site',pull:true,put:true},//定义要被拖拽对象的数组arr1:[{id:1,name:'www.itxst.com'},{id:2,name:'www.jd.com'},{id:3,name:'www.baidu.com'},{id:3,name:'www.taobao.com'}],arr2:[], //空数组//空数组之在的样式,设置了这个样式才能拖入style:'min-height:120px;display: block;'};},methods: {//开始拖拽事件onStart(){this.drag=true;},//拖拽结束事件onEnd() {this.drag=false;},},
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass{background-color:  blue !important;
}
.chosenClass{background-color: red !important;opacity: 1!important;
}
.dragClass{background-color: blueviolet !important;opacity: 1 !important;box-shadow:none !important;outline:none !important;background-image:none !important;
}
.itxst{margin: 10px;}
.title{padding: 6px 12px;
}
.col{width: 40%;flex: 1;padding: 10px;border: solid 1px #eee;border-radius:5px ;float: left;
}
.col+.col{margin-left: 10px;
}.item{padding: 6px 12px;margin: 0px 10px 0px 10px;border:  solid 1px #eee;background-color: #f1f1f1;
}
.item:hover{background-color: #fdfdfd;cursor: move;
}
.item+.item{border-top:none ;margin-top: 6px;
}
</style>

 参考文档

vue.draggable中文文档 - itxst.com

相关文章:

vue.draggable浅尝

介绍 Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动&#xff0c;可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作&#xff0c;总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的…...

Tree相关

1.树相关题目 1.1 二叉树的中序遍历&#xff08;简单&#xff09;&#xff1a;递归 题目&#xff1a;使用中序遍历二叉树 思想&#xff1a;按照访问左子树——根节点——右子树的方式遍历这棵树&#xff0c;而在访问左子树或者右子树的时候我们按照同样的方式遍历&#xff0…...

git日常操作-案例

文章目录 查看远程有那些分支 查看远程有那些分支 git ls-remote --heads origin...

cmake链接.lib库

当使用CMake编写CMakeLists.txt文件来链接其他文件夹的.lib库文件时&#xff0c;你需要做以下几个步骤&#xff1a; 设置库文件路径&#xff1a; 使用 link_directories() 函数设置要搜索库文件的路径。例如&#xff1a; link_directories(${CMAKE_SOURCE_DIR}/path/to/libra…...

SkyWalking 部署(包含ES)

SkyWalking安装 结构 首先SkyWalking主要需要oapService、webApp、Elasticsearch&#xff08;可选存储&#xff09;三个&#xff0c;接下来讲一下这三个的安装步骤&#xff0c;安装过程中出现了一些细小的配置错误&#xff0c;导致用了快两天才弄好&#xff0c;麻木了&#x…...

Android学习之路(2) 设置视图

一、设置视图宽高 ​ 在Android开发中&#xff0c;可以使用LayoutParams类来设置视图&#xff08;View&#xff09;的宽度和高度。LayoutParams是一个用于布局的参数类&#xff0c;用于指定视图在父容器中的位置和大小。 ​ 下面是设置视图宽度和高度的示例代码&#xff1a; …...

SIP/VoIP之常见的视频问题

除了语音通话外&#xff0c;视频通话也是SIP协议通话中重要的功能&#xff0c;在实际应用中&#xff0c;经常会遇到一些视频问题&#xff0c;如下&#xff08;以h264为例&#xff09; 一、 己方未显示对方视频图像 排查方法&#xff1a; 查看网络抓包中有没有发给已方的视频…...

docker的服务/容器缺少vim问题

背景/问题&#xff1a; docker的服务/容器缺少vim问题 bash: vim: command not found 在docker的mysql服务中安装Vim 1、执行apt-get update root6d8d17e320a0:/# apt-get update问题:文件下载失败 Err:1 http://security.debian.org/debian-security buster/updates InRe…...

HCIP-OpenStack

1、OpenStack概述 OpenStack是一种云操作系统&#xff0c;OpenStack是虚拟机、裸金属和容器的云基础架构。可控制整个数据中心的大型计算、存储和网络资源池&#xff0c;所有资源都通过API或Web界面进行管理。 为什么称OpenStack是云操作系统&#xff1f; 云一般指云计算&…...

前端:Vue.js学习

前端:Vue.js学习 1. 第一个Vue程序2. Vue指令2.1 v-if、v-else-if、v-else2.2 v-for2.3 事件绑定 v-on:2.4 v-model 数据双向绑定2.5 v-bind 绑定属性 3. Vue组件4. Vue axios异步通信5. 计算属性6. 插槽 slots7. 自定义事件内容分发 1. 第一个Vue程序 首先把vue.js拷贝到本地…...

MySQL到Oracle快速上手

第一次做Oracle项目的时候对一些语法区别不太清楚&#xff0c;这里列出一些开发中发现的与MYSQL不同的点 一个用户相当于一个数据库 表空间 表空间是用于存储表、索引和其他数据库对象的逻辑存储结构。每个表空间由一个或多个数据文件组成&#xff0c;这些文件可以位于不同的物…...

机器人CPP编程基础-01第一个程序Hello World

很多课程先讲C/C或者一些其他编程课&#xff0c;称之为基础课程。然后到本科高年级进行机器人专业课学习&#xff0c;这样时间损失非常大&#xff0c;效率非常低。 C/单片机/嵌入式/ROS等这些编程基础可以合并到一门课中进行实现&#xff0c;这些素材已经迭代三轮以上&#xf…...

前后端分离------后端创建笔记(03)前后端对接(下)

本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论&#xff0c;如有侵权请联系 源码&#xff1a;https://gitee.com/green_vegetables/x-admin-project.git 素材&#xff1a;https://pan.baidu.com/s/…...

Leet code1049 最后一块石头的重量II

1049 最后一块石头的重量II 【问题描述】 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉…...

Rust语法:变量,函数,控制流,struct

文章目录 变量可变与不可变变量变量与常量变量的Shadowing标量类型整数 复合类型 函数控制流if elseloop & whilefor in structstruct的定义Tuple Structstruct的方法与函数 变量 可变与不可变变量 Rust中使用let来声明变量&#xff0c;但是let声明的是不可变变量&#x…...

LVS简介及LVS-DR搭建

目录 一. LVS简介&#xff1a; 1.简介 2. LVS工作模式&#xff1a; 3. LVS调度算法&#xff1a; 4. LVS-DR集群介绍&#xff1a; 二.LVS-DR搭建 1.RS配置 1&#xff09;两台RS&#xff0c;需要下载好httpd软件并准备好配置文件 2&#xff09;添加虚拟IP&#xff08;vip&…...

Java基础篇--日期时间类

目录 前言 Instant&#xff08;时间戳&#xff09;类 LocalData(日期)类 LocalTime(时间)类 LocalDataTime(日期时间)类 Duration(时间间隔)类 Period(日期间隔)类 Clock&#xff08;获取时区&#xff09;类 前言 在开发中经常需要处理日期和时间&#xff0c;Java提供…...

Vue生命周期函数 详解

以下是Vue生命周期函数的流程图和每个周期的代码详解&#xff1a; 流程图&#xff1a; beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed详解&#xff1a; beforeCreate&#xff1a; 触发时…...

判断链表有环的证明

目录 1.问题 2.证明 3.代码实现 1.问题 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用…...

百度屏蔽词有哪些?其中就有移民关键词指数被屏蔽?

我是百收网SEO&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 今日tombkeeper消息爆料&#xff1a;百度指数已经屏蔽“移民”等关键词指数。 大家好&#xff0c;我是百收网SEO商学院的狂潮微课老师&#xff0c;今天我们来讲解第 12 节课关键词优化难度分析…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染&#xff08;SSR&#xff09;与静态网站生成&#xff08;SSG&#xff09; 框架&#xff0c;由 Vercel 开发。它简化了构建生产级 React 应用的过程&#xff0c;并内置了很多特性&#xff1a; ✅ 文件系…...

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

13.10 LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析

LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词:多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...

aurora与pcie的数据高速传输

设备&#xff1a;zynq7100&#xff1b; 开发环境&#xff1a;window&#xff1b; vivado版本&#xff1a;2021.1&#xff1b; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程&#xff0c;pc通过pcie传输给fpga&#xff0c;fpga再通过aur…...

AWSLambda之设置时区

目标 希望Lambda运行的时区是东八区。 解决 只需要设置lambda的环境变量TZ为东八区时区即可&#xff0c;即Asia/Shanghai。 参考 使用 Lambda 环境变量...