Vue3拖拽功能【VueDraggablePlus】

一、介绍

由于 Sortablejs 的 vue3 组件一直没有更新,已经跟 vue3 严重脱节,所以诞生了这个项目,这个组件是基于 Sortablejs 的,所以如果你想了解更多关于 Sortablejs 的信息,可以查看Sortablejs 官网。VueDraggablePlus 并非一个我熟悉的 Vue.js 插件或库。在 Vue.js 生态系统中,拖拽相关的功能常常由一些流行的库来实现,例如 vue-draggablevuedraggable 等。

如果VueDraggablePlus是在这之后发布的或者是一个相对较小众的库,我建议你查看相关的文档或 GitHub 仓库,以获取详细的介绍和用法信息。以下是你可能采取的步骤:

  1. 搜索 GitHub: 在 GitHub 上搜索 VueDraggablePlus,找到相应的仓库。通常,开发者会在仓库中提供文档和用法示例。

  2. 查看 npm 页面: 如果你是通过 npm 或 yarn 安装的这个库,可以查看其在 npm 上的页面。你可以在终端中运行 npm info VueDraggablePlus 或 yarn info VueDraggablePlus 来获取有关包的信息。

  3. 查找在线文档: 如果 VueDraggablePlus 有在线文档,可以查阅这些文档以获取详细的介绍、配置选项和使用方法。

  4. 查看源代码: 如果其他方法都找不到足够的信息,你可以查看 VueDraggablePlus 的源代码,了解其 API 和实现方式。

如果你能提供更多的上下文或详细的信息,我也许可以提供更具体的帮助。

网址:VueDraggablePlus | 支持 Vue2 和 Vue3 的拖拽组件vue3拖拽排序组件icon-default.png?t=N7T8https://alfred-skyblue.github.io/vue-draggable-plus/?from=ipkd.cn

二、基础使用实例:

<template>
  <button @click="start">start</button>
  <button @click="pause">pause</button>
  <button @click="disabled = true">disabled</button>
  <div class="flex">
    <VueDraggable
      ref="el"
      v-model="list"
      :disabled="disabled"
      :animation="150"
      ghostClass="ghost"
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
      @start="onStart"
      @update="onUpdate"
    >
      <div
        v-for="item in list"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

const el = ref<UseDraggableReturn>()
const disabled = ref(false)
function pause() {
  el.value?.pause()
}

function start() {
  el.value?.start()
}

const onStart = () => {
  console.log('start')
}

const onUpdate = () => {
  console.log('update')
}
</script>

<style scoped>
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>

需要更多,可到官网查询即可!

参数说明类型默认值
animation拖动时显示动画Number0
chosenClass被选中项的 css 类名String'sortable-chosen'
delay选中拖拽延时Number0
delayOnTouchOnlytouch 事件延迟Number0
direction拖拽方向,默认自动判断'vertical'\'horizontal'
disabled是否禁止拖拽Booleanfalse
dragClass拖拽项类名String'sortable-drag'
draggable指定元素内的哪些项目应该是可拖动的String-
emptyInsertThreshold拖动时鼠标必须与空可排序项的距离(以像素为单位),以便将拖动元素插入到该可排序项中, 设置为0禁用此功能。Number5
easing简化动画。Easing-
fallbackClass当使用forceFallback的时候,被复制的dom的css类名Stringsortable-fallback
fallbackOnBody将cloned DOM 元素挂到body元素上。Booleanfalse
fallbackTolerance以像素为单位指定鼠标在被视为拖动之前应该移动多远。Number0
filter不需要进行拖动的元素String-
forceFallback忽略 HTML5拖拽行为,强制回退Booleanfalse
ghostClassdrop placeholder的css类名String'sortable-ghost'
group要将元素从一个列表拖到另一个列表中,两个列表必须具有相同的group 值。您还可以定义列表是否可以被移出、或者克隆以及接收其他列表元素。详情查阅上方TS类型定义Group-
handle设置可拖拽句柄的css类名,如果不设置,默认对目标元素的子列表操作进行拖拽String-
invertSwap如果设置为 true,将始终使用反向交换区Booleanfalse
invertedSwapThreshold反向交换阈值,默认情况下将设置为swapThreshold 值Number-
preventOnFilter触发filter时调用event.preventDefault()Booleantrue
removeCloneOnHide删除不显示的克隆元素,而不是仅仅隐藏它Booleantrue
sort定义列表单元是否可以在列表容器内进行拖拽排序Booleantrue
swapThreshold交换区的阈值Number1
touchStartThreshold在取消延迟拖动事件之前点应该移动多少像素Number1
setData传递一个函数,函数的第一个参数为DataTransfer类型,第二个参数为HTMLElement 类型Function
scroll是否启用滚动Boolean\HTMLElement
scrollFn自定义滚动ScrollFn-
scrollSensitivity鼠标必须离边缘多近才能开始滚动,单位 pxNumber-
scrollSpeed滚动速度(ms/px)number-
bubbleScroll将自动滚动应用于所有父元素,以便更轻松地移动Booleantrue
onChoose元素被选中((event: SortableEvent) => void)-
onUnchoose元素取消选中((event: SortableEvent) => void)-
onStart元素开始拖拽((event: SortableEvent) => void)-
onEnd元素取消拖拽((event: SortableEvent) => void)-
onAdd元素从一个列表拖拽到另一个列表((event: SortableEvent) => void)-
onUpdate元素顺序更新时触发((event: SortableEvent) => void)-
onSort列表的任何更改都会触发((event: SortableEvent) => void)-
onRemove元素从列表中移除进入另一个列表((event: SortableEvent) => void)-
onFilter试图拖拽一个filtered的元素((event: SortableEvent) => void)-
onMove拖拽移动的时候触发((event: MoveEvent,originalEvent: Event) => void)-
onClone克隆一个元素时触发((event: SortableEvent) => void)-
onChange拖拽元素改变位置时触发((event: SortableEvent) => void)-

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Markdown从入门到精通

Markdown从入门到精通 文章目录 Markdown从入门到精通前言一、Markdown是什么二、Markdown优点三、Markdown的基本语法3.1 标题3.2 字体3.3 换行3.4 引用3.5 链接3.6 图片3.7 列表3.8 分割线3.9 删除线3.10 下划线3.11 代码块3.12 表格3.13 脚注3.14 特殊符号 四、Markdown的高…

拼多多商品详情数据接口在数据分析行业的作用性

在数据分析行业中&#xff0c;拼多多商品详情数据的作用性主要体现在以下几个方面&#xff1a; 了解市场和用户需求&#xff1a;通过拼多多商品详情数据&#xff0c;企业可以了解到市场上什么产品受欢迎&#xff0c;用户对产品的反馈和评价如何&#xff0c;从而调整自己的销售…

js获取快递单号小练习

目录 1、css代码 2、html代码 3、js代码 完整代码 效果图 1、css代码 .box{width: 400px;height: 300px;margin: 100px auto;position: relative;}input{width: 250px;height: 40px;outline: none;}span{display: block;position: absolute;min-width: 270px;max-width: 40…

SpringBoot集成Spring Security+jwt+kaptcha验证(简单实现,可根据实际修改逻辑)

参考文章 【全网最细致】SpringBoot整合Spring Security JWT实现用户认证 需求 结合jwt实现登录功能&#xff0c;采用自带/login接口实现权限控制 熟悉下SpringSecurity SpringSecurity 采用的是责任链的设计模式&#xff0c;是一堆过滤器链的组合&#xff0c;它有一条很…

Centos7部署Graylog5.2日志系统

Graylog5.2部署 Graylog 5.2适配MongoDB 5.x~6.x&#xff0c;MongoDB5.0要求CPU支持AVX指令集。 主机说明localhost部署Graylog&#xff0c;需要安装mongodb-org-6.0、 Elasticsearch7.10.2 参考&#xff1a; https://blog.csdn.net/qixiaolinlin/article/details/129966703 …

基于Python+WaveNet+MFCC+Tensorflow智能方言分类—深度学习算法应用(含全部工程源码)(一)

目录 前言引言总体设计系统整体结构图系统流程图 运行环境Python环境TensorFlow 环境Jupyter Notebook环境Pycharm 环境 相关其它博客工程源代码下载其它资料下载 前言 博主前段时间发布了一篇有关方言识别和分类模型训练的博客&#xff0c;在读者的反馈中发现许多小伙伴对方言…

外贸辅助工具定制的价格范围,别被坑了哟!

随着全球化的不断发展&#xff0c;外贸已成为企业不可或缺的一部分。然而&#xff0c;在外贸过程中&#xff0c;企业往往会遇到各种问题&#xff0c;如语言障碍、文化差异、法规繁琐等&#xff0c;为了解决这些问题&#xff0c;许多企业选择定制外贸辅助工具。 但是&#xff0…

高德地图vue实现自定义标点热力图效果(缩放时展示不同数据)

高德地图插件引入省略。。。样式和vue基础组件省略。。。 如果每个标点没有数值&#xff0c;则可以用点聚合来实现功能下面例子&#xff0c;每个标点会有按市统计的数值&#xff0c;而且缩放一定程度时&#xff0c;需要展示按省统计的标点&#xff0c;因此需要自定义标点样式和…

多相Buck的工作原理

什么是多相Buck电源&#xff1f; 多相电源控制器是一种通过同时控制多个电源相位的设备&#xff0c;以提供稳定的电力供应。相位是指电源中的电流和电压波形。多相控制器的设计旨在最大程度地减小电力转换系统的纹波&#xff0c;并提高整体能效。它通常包含一系列的功率级联&a…

python六子棋ai对战(alpha-beta)剪枝算法

核心代码 def __init__(self): #初始化函数self.num0 #对yi次数self.rows 10 #初始化棋盘10行self.cols 10 # 初始化棋盘10列self.rank6 #阶数 代表六子棋self.empty_board() #清空棋盘self.V 10 #攻击程度self.E10 #防守程度self.depth2 #思考深度…

spring 的概述和入门

​ 我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; …

cmake生成表达式

不积小流&#xff0c;无以成江海 <CONFIG:RELEASE> config这个关键字&#xff0c;主要是看CMAKE_BUILD_TYPE这个变量的值是不是和冒号后的一样&#xff0c;一样的话就返回true, 否则就是false. cmake_minimum_required(VERSION 3.10) project(Test) set(CMAKE_CXX_STA…

JVM的内存结构详解「重点篇」

一、JVM虚拟机数据区 虚拟机栈 1、 线程私有 2、 每个方法被执行的时候都会创建一个栈帧用于存储局部变量表&#xff0c;操作栈&#xff0c;动态链接&#xff0c;方法出口等信息。每一个方法被调用的过程就对应一个栈帧在虚拟机栈中从入栈到出栈的过程。 3、栈帧: 是用来存储…

HarmonyOS应用开发工具DevEco Studio安装与使用

语雀知识库地址&#xff1a;语雀HarmonyOS知识库 飞书知识库地址&#xff1a;飞书HarmonyOS知识库 知识库内容逐步完善中… 工欲善其事必先利其器&#xff0c;要编写HarmonyOS应用就需要用到官方提供的IDE工具来编写相应的代码。 在鸿蒙开发者官网&#xff0c;其提供了官方的开…

关于什么是 JVM

关于什么是 JVM&#xff0c;看看普通⼈和⾼⼿的回答。 普通人 JVM 就是 Java 虚拟机&#xff0c;是⽤来运⾏我们平时所写的 Java 代码的。优点是它会 ⾃动进⾏内存管理和垃圾回收&#xff0c;缺点是⼀旦发⽣问题&#xff0c;要是不了解 JVM 的运⾏ 机制&#xff0c; 就很难…

企业能用ov多域名https证书

多域名https证书是https数字证书中灵活性较高的一款产品。各个正规CA认证机构旗下的多域名https证书都有同时保护多个域名站点的功能&#xff0c;但是和其它域名https证书不一样的是多域名https证书保护的域名类型比较广。多域名https证书可以保护多个主域名和子域名站点&#…

贪吃的猴子 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 一只贪吃的猴子&#xff0c;来到一个果园&#xff0c;发现许多串香蕉排成一行&#xff0c;每串香蕉上有若干根香蕉。每串香蕉的根数由数组numbers给出。猴子获取香…

低多边形3D建模石头材质纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…

HarmonyOS4.0从零开始的开发教程09页签切换

HarmonyOS&#xff08;七&#xff09;页签切换 List组件和Grid组件的使用 Tabs组件的使用 概述 在我们常用的应用中&#xff0c;经常会有视图内容切换的场景&#xff0c;来展示更加丰富的内容。比如下面这个页面&#xff0c;点击底部的页签的选项&#xff0c;可以实现“首页…

react Hooks实现原理

Fiber 上篇文章fiber简单理解记录了react fiber架构&#xff0c;Hooks是基于fiber链表来实现的。阅读以下内容时建议先了解react fiber。 jsx -> render function -> vdom -> fiber树 -> dom vdom 转 fiber 的过程称为 recocile。diff算法就是在recocile这个过程…