vuedraggable在vue2.0和vue3.0 中的应用

文章目录

    • vuedraggable
    • 在vue2.0中的应用
    • 在vue3.0中的应用

vuedraggable

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。

vuedraggable中文文档
github网站
官网

  1. vuedraggable特性
  • 支持触摸设备
  • 支持拖拽和选择文本
  • 支持智能滚动
  • 支持不同列表之间的拖拽
  • 不以jQuery为基础
  • 和视图模型同步刷新
  • 和vue2的国度动画兼容
  • 支持撤销操作
  • 当需要完全控制时,可以抛出所有变化
  • 可以和现有的UI组件兼容
  1. 安装
      // Vue 2.0: npm install vuedraggable@5// Vue 3.0:npm install vuedraggable@next
    
  2. 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>
    
  3. 组件中的引用
    // Vue 2.0
    import draggable from 'vuedraggable';export default {components: {draggable},// ...
    }
    // Vue 3.0
    import { draggable } from 'vuedraggable';export default {components: {draggable},// ...
    }
    
  4. 属性说明
    如果下面的属性说明未能完全看明白,请访问非vue版 sortable.js 里面有更详细的例子。
    属性名称说明
    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滚动速度
    • group属性 拖拽分组多组之间相互拖拽,可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动。
         //设置方式一,直接设置组名group:'itxst'//设置方式,object,也可以通过自定义函数function实现复杂的逻辑group:{name:'itxst',//组名为itxstpull: true|false| 'clone'|array|function,//是否允许拖出当前组put:true|false|array|function,//是否允许拖入当前组}```
      
    • delay属性 鼠标按下后等待n秒才允许拖动,此属性可以一定程度上防止误触操作,比如设置delay为1000表示按下一秒后才允许拖动。
    • disabled属性 实现开启或禁用vue.draggable的拖拽效果。
    • scroll属性 容器有滚动条时是否允许滚动及当父容器元素有滚动条时是否允许拖动。
    • animation属性 设置vue.draggable过渡效果,这样拖动时过渡位置就不会显的太生硬, 默认值0。
    • handle属性 当鼠标落在handle指定的元素上面时才允许拖动,如下面的例子只能点击加号区域才能拖动,点击其他区域则无法拖动。
    • filter 如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可,本文将实现包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行,用到filter和move属性。
      <draggable v-model="arr1" filter=".forbid"  animation="300"  :move="onMove"><transition-group><div :class="item.id==1?'item forbid':'item'" v-for="item in arr1" :key="item.id">   		{{item.name}}</div></transition-group>
      </draggable>
      
    • chosenClass属性 设置选中元素的样式,可以通过自定义样式来方便的区分出那个元素被选中。
    • ghostClass属性 目标位置占位符的样式及需要停靠位置的样式。
    • clone拷贝 实现常用菜单功能,从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。
  5. 事件说明
    事件名称说明
    start开始拖动时触发的事件
    add从一个数组拖拽到另外一个数组时触发的事件
    remove移除事件
    update拖拽变换位置时触发的事件
    end拖拽完成时的事件
    choose鼠标点击选中要拖拽元素时的事件
    unchoose选中后松开鼠标的事件
    sort位置变化时的事件
    clone从一个数组拖拽到另外一个数组时触发的事件和add不同,clone是复制了数组元素
    move自定义控制那些元素可以拖拽或不允许拖拽,实际业务场景往往会比较复杂,往往在拖拽过程中才能知道那些元素允许停靠,点击时才知道那些元素是否允许拖拽。

在vue2.0中的应用

<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>
</template>
<style scoped>/*被拖拽对象的样式*/.item {padding: 6px;background-color: #fdfdfd;border: solid 1px #eee;margin-bottom: 10px;cursor: move;} /*选中样式*/.chosen {border: solid 2px #3089dc !important;}
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {//注册draggable组件components: {draggable,},data() {return { drag:false,//定义要被拖拽对象的数组myArray:[{people:'cn',id:1,name:'www.itxst.com'},{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;},},
};
</script>

在vue3.0中的应用

<template><div class="itxst"><div><draggable:list="state.list"ghost-class="ghost"chosen-class="chosenClass"animation="300"@start="onStart"@end="onEnd"><template #item="{ element }"><div class="item">{{ element.name }}</div></template></draggable></div><div>{{ state.list }}</div></div>
</template>
<script setup>
import { ref, reactive } from "vue";
import draggable from "vuedraggable";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const state = reactive({//需要拖拽的数据,拖拽后数据的顺序也会变化list: [{ name: "www.itxst.com", id: 0 },{ name: "www.baidu.com", id: 1 },{ name: "www.google.com", id: 2 },],
});//拖拽开始的事件
const onStart = () => {console.log("开始拖拽");
};//拖拽结束的事件
const onEnd = () => {console.log("结束拖拽");
};
</script>
<style scoped>
.itxst {width: 600px;display: flex;
}
.itxst > div:nth-of-type(1) {flex: 1;
}
.itxst > div:nth-of-type(2) {width: 270px;padding-left: 20px;
}
.item {border: solid 1px #eee;padding: 6px 10px;text-align: left;
}.item:hover {cursor: move;
}
.item + .item {margin-top: 10px;
}
.ghost {border: solid 1px rgb(19, 41, 239);
}
.chosenClass {background-color: #f1f1f1;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/28789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

部署远程控制台访问服务Rttys,第一部分客户端(安装CMAKE)

背景&#xff1a;现公司有一需求&#xff0c;需要开发一个程序&#xff0c;实现页面点击按钮后跳转&#xff0c;远程连接到指定的虚拟机&#xff0c;并可以进行linux命令操作&#xff0c;在网上找了很多文章&#xff0c;发现都没有详细的步骤和部署问题处理&#xff0c;所以自己…

Web渗透信息收集进阶

网站敏感目录与文件 网站敏感目录表示网站目录中容易被恶意人员利用的一些目录。通常恶意人员都是通过工具扫描&#xff0c;来扫出网站的敏感目录&#xff0c;敏感目录是能够得到其他网页的信息&#xff0c;从而找到后台管理页面&#xff0c;尝试进入后台等&#xff0c;扫描网…

33、matlab矩阵分解汇总:LU矩阵分解、Cholesky分解、QR分解和SVD分解

1、矩阵分解简介 矩阵分解是指将一个矩阵分解成子矩阵或其他形式的矩阵表示的过程。常见的矩阵分解方法包括LU分解、QR分解、奇异值分解&#xff08;SVD&#xff09;、特征值分解等。 LU分解&#xff1a;将一个矩阵分解为一个下三角矩阵L和一个上三角矩阵U的乘积&#xff0c;…

淘宝评论电商API接口,揭示用户真实评价

随着互联网的快速发展&#xff0c;电子商务已经成为了人们生活中不可或缺的一部分。淘宝作为中国最大的在线购物平台&#xff0c;拥有数以亿计的消费者和商家。而用户评价作为消费者了解商品和服务的重要途径&#xff0c;对于商家的信誉和销售有着至关重要的影响。因此&#xf…

PMP证书有何用?

PMP证书有何用&#xff1f; PMP项目管理专业人士资格认证证书对从事或希望从事项目管理工作的人员有重要意义&#xff0c;具体体现在以下几个方面&#xff1a; 1. 提供职业机会&#xff1a; PMP是项目管理领域的国际认可标准&#xff0c;拥有该证书的人在求职时具备了更强的…

【node】同步获取盘符名

功能 获取电脑所有磁盘的盘符名字&#xff0c;并返回数组 代码 var showLetter2 function () {//返回所有盘符&#xff0c;同步var arr;var { execSync } require(node:child_process);//获取模块var str execSync(wmic logicaldisk get caption).toString();//将返回的变…

goframe目录文件解析

goframe 目录分块 ├─api ├─hack ├─internal │ ├─cmd │ ├─consts │ ├─controller │ ├─dao │ ├─logic │ ├─model │ │ ├─do │ │ └─entity │ ├─packed │ └─service ├─manifest │ ├─config │ ├─deploy │ │ └─kustomize │ │ ├…

LabVIEW伺服电机可应用在哪些领域

LabVIEW与伺服电机的结合&#xff0c;得益于LabVIEW强大的图形编程能力和伺服电机的高精度、高响应速度&#xff0c;广泛应用于多个领域。以下是一些主要应用领域&#xff1a; 1. 工业自动化 数控机床控制 LabVIEW用于控制伺服电机在数控机床中的运动&#xff0c;实现高精度的…

【CSS】background-origin作用是什么,怎么使用

background-origin属性在CSS中用于设置背景图片的定位区域&#xff0c;即决定背景图片从哪里开始定位。它有三个主要的属性值&#xff0c;分别表示背景图片相对于不同元素区域的定位起点&#xff1a; 属性值及意义&#xff1a; padding-box&#xff1a;背景图片相对于内边距框&…

JAVA小知识20:万字详解List与ArrayList

一、集合简介 1.1、什么是集合&#xff1f; 可同时存储多个元素的数据结构就是集合。 1.2、为什么要有集合&#xff1f; 我们可以使用数组同时存储多个元素&#xff0c;但是数组有个弊端。数组创建之后长度就会固定&#xff0c;如需扩容则需要手动扩容&#xff0c;我们需要…

图像的对比度和亮度

目标 访问像素值用0来初始化矩阵cv::saturate_cast像素转换提高一张图像的亮度 原理 图像处理 图像变换可以被视作两个步骤&#xff1a; 点操纵&#xff08;像素转换&#xff09;相邻区域转换&#xff08;以面积为基础&#xff09; 像素转换 在这种图像处理的转换过程中…

oracle发送邮件附件的步骤?怎么配置发信?

oracle发送邮件附件的操作指南&#xff1f;Oracle邮件服务如何&#xff1f; 在Oracle数据库中&#xff0c;发送电子邮件附件是一项常见的任务&#xff0c;特别是在需要自动化通知或报表分发的情况下。AokSend将介绍如何使用Oracle数据库发送带有附件的电子邮件。以下是详细的步…

智能呼叫中心服务的三个时代呼叫系统升级

在不同的时代发展背景下对智能服务的诉求和认知都是不同的&#xff0c;相应的每个时代认知下的系统和运营也是不同的&#xff0c;唯有认知、系统、运营相结合才能构造出智能时代。 1、智能时代 1.0 在智能服务的 1.0 时代我们将智能服务定义为自助服务工具&#xff0c;传统的服…

iOS KeychainAccess的了解与使用

KeychainAccess 是一个用于 iOS、macOS、tvOS 和 watchOS 上的 Swift 密钥链访问库。它提供了一个简单且安全的 API,用于在设备的密钥链中存储和检索数据。 KeychainAccess 的一些主要特点包括: 简单易用的 API&#xff1a;该库提供了一个直观的 API,可以轻松地将数据存储和检…

RTSP/Onvif安防监控平台EasyNVR抓包命令tcpdump使用不了,该如何解决?

安防视频监控汇聚EasyNVR智能安防视频监控平台&#xff0c;是基于RTSP/Onvif协议的安防视频平台&#xff0c;可支持将接入的视频流进行全平台、全终端分发&#xff0c;分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等格式。平台可提供的视频能力包括&#xff1a;…

实现虚拟机的难点

一、背景 目前的虚拟机有很多&#xff0c;例如VMWare、VitrualBox、QEMU、JVM、Python虚拟机等等。 二、虚拟机的作用 在一台已有的计算机中&#xff0c;忽略实际操作系统种类和硬件的型号&#xff0c;用一些接口库来搭建一台用户想要的&#xff0c;虚拟的程序运行环境。 例如…

LVS负载均衡集群企业级应用实战-LVS-DR(四)

目录 LVS-DR 一. 环境准备 二. 对虚拟主机操作 三. 对真实服务器操作 四. 打开网页测试 LVS-DR 一. 环境准备 三台虚拟机&#xff0c;都要在同一网段内&#xff0c;统一关闭防火墙和selinux&#xff0c;时间同步&#xff0c;配置好YUM源。系统用centos和roucky都行。 主…

vue3+vant4中表单内嵌picker的默认值设置

vue3vant4中表单内嵌picker的默认值设置 头一次用vant就在表单默认值上费劲了&#xff0c;搞下来代码量比antd系列的代码量大。废话不说&#xff0c;直接上代码&#xff0c;将这三段代码直接复制到一个组件中即可看到效果。早上5点多就起来捣鼓这玩意&#xff0c;上午以为完成…

2024最新版Node.js下载安装及环境配置教程(非常详细)

一、进入官网地址下载安装包 官网&#xff1a;Node.js — Run JavaScript Everywhere 其他版本下载&#xff1a;Node.js — Download Node.js (nodejs.org) 选择对应你系统的Node.js版本 二、安装程序 &#xff08;1&#xff09;下载完成后&#xff0c;双击安装包&#xf…

【AI原理解析】— 文心一言模型

目录 模型架构 Transformer模型 编码器-解码器结构 训练过程 预训练 微调 关键技术 知识增强 上下文感知 个性化生成 推理与生成 应用场景 问答系统 文本生成 对话系统 模型架构 Transformer模型 文心一言的核心架构采用了Transformer模型&#xff0c;该模型是一…