vue通过draggable实现拖拽功能

1. 官方文档

2. 安装

```
yarn add vuedraggable  
npm i -S vuedraggable
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
```

3. 其他组件:

sortablejs.js拖拽
非官网文档

    npm install sortablejs --save<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>

4.属性说明

属性名称说明
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滚动速度

5.案例:

image.png

<template><div><!-- handle=".mover" mover的calss才可以拖动 --><!-- draggable=".moveItem" moveItem的calss才可以换位置 --><!-- filter=".undraggable" undraggable的class禁止拖拽 --><!--  group="people" people这一组里面的可以拖拽 --><draggable v-model="myArray" chosen-class="chosen" force-fallback="true" handle=".mover" draggable=".moveItem" filter=".undraggable" group="people" animation="1000"><transition-group><div v-for="element in myArray" :key="element.id" class="item" :class="[element.class]"><div v-if="element.class=='moveItem'" class="btnMove mover" /><div v-else class="btnMove1" /><div>{{ element.name }}</div></div></transition-group></draggable></div>
</template>
<script>
import draggable from 'vuedraggable'
export default {components: {draggable},data() {return {myArray: [{ people: 'cn', id: 1, name: 'www.itxst.com', class: 'moveItem' },{ people: 'cn', id: 2, name: 'www.baidu.com', class: 'moveItem' },{ people: 'cn', id: 3, name: 'www.taobao.com', class: 'moveItem' },{ people: 'us', id: 4, name: 'www.google.com', class: 'undraggable' }]}},watch: {myArray(value) {console.log(value)}}
}
</script>
<style lang="scss" scoped>
.item{cursor: pointer;line-height: 30px;display: flex;align-items: center;user-select: none;margin-top: 10px;.btnMove{width: 30px;height: 40px;background-image: url('~@/assets/img/moverImg.png');background-repeat: no-repeat;background-position: center center;cursor: move;display: inline-block;}.btnMove1{width: 30px;height: 40px;display: inline-block;}
}
</style>

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

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

相关文章

vue3的面试题

ref里面放对象发生的事情 ref只会对对象的属性进行响应式转换&#xff0c;而不会对对象的原型链上的属性进行转换。如果需要对对象的原型链上的属性进行响应式转换&#xff0c;可以使用reactive函数。 toRefs的适用场景&#xff1f; toRefs是Vue 3中的一个响应式API&#xf…

【Eclipse】搭建python环境;运行第一个python程序helloword

目录 0.环境 1.需准备&搭建思路 2.搭建具体步骤 1&#xff09;查看是否安装过python 2&#xff09;安装eclipse 3&#xff09;安装和配置pyDev 3.创建第一个python程序具体步骤 1&#xff09;新建项目 2&#xff09;输入项目名字&#xff0c;和配置选项 3&#x…

Ubuntu下安装nginx服务,实现通过URL读取ubuntu下图片

1.安装nginx包 sudo apt update sudo apt install nginx 2.安装完成后系统自动启动nginx sudo systemctl status nginx 查看nginx服务的状态 3.开启防火墙上的HTTP服务端口80 sudo ufw allow ‘Nginx HTTP’ 4.在浏览器输入 http://localhost 看到nginx的欢迎界面&#xff0c;…

ceph对象三元素data、xattr、omap

这里有一个ceph的原则&#xff0c;就是所有存储的不管是块设备、对象存储、文件存储最后都转化成了底层的对象object&#xff0c;这个object包含3个元素data&#xff0c;xattr&#xff0c;omap。data是保存对象的数据&#xff0c;xattr是保存对象的扩展属性&#xff0c;每个对象…

ESXi 6.7添加螃蟹2.5g网卡支持

安装了ESXi 6.7&#xff0c;结果机器两块网卡只能识别一块&#xff0c;然后想着不能让另一块浪费啊&#xff0c;开始折腾&#xff0c;看着网上都是找的驱动然后封装进iso&#xff0c;可是我已经装完了&#xff0c;怎么办&#xff0c;然后找到了下面解决方法 1.找驱动 下载RTL81…

MyBatis学习简要

目录 什么是MyBatis? MyBatis实现的设想 MyBatis基于配置文件的开发步骤 mybatis的配置文件 Mapper代理开发 配置文件完成增删改查的三步 注解开发 一、条件查询 参数接收时&#xff0c;参数的设置&#xff1a; 动态条件查询&#xff1a; 二、添加功能 步骤&#xf…

Unexpected mutation of “xxxx“ prop

原因 是因为子级修改了父级的数据&#xff0c;所以eslint执行的时候报了这个错 修复方式 1 如果是弹窗等组件&#xff0c;可以根据功能进行修改&#xff0c;比如我这块用的 element ui 的 dialog&#xff0c;便可以改成这样 使用 model-value 代替 修复方式 2 新建子组件…

【2】openGL shader着色器分析三角形填色

源代码在下面。文档查询 > docs.gl 结果展示&#xff1a;使用自己的shader和打印错误描述 该篇主要在上一部分代码的基础上添加了自己写的shader&#xff0c;即着色器。最常用的两个着色器 vertex shader 和 fragment shader&#xff0c;即顶点着色器和片段着色器。 大概…

【业务功能篇93】微服务-springcloud-多线程-异步处理-异步编排-CompletableFutrue-实战运用

异步处理编排 我们可以在商品详细信息查询的位置实现CompletableFuture的异步编排处理。 根据业务分析&#xff1a;3.4.5数据接口的入参信息需要来源于1数据接口的返回信息&#xff0c;也就是skuid 所以可以设计 1 3 4 5 串行线程 &#xff0c;而 3 4 5依赖1 &#xff0c;需要等…

【ROS 03】ROS通信机制进阶

上一章内容&#xff0c;主要介绍了ROS通信的实现&#xff0c;内容偏向于粗粒度的通信框架的讲解&#xff0c;没有详细介绍涉及的API&#xff0c;也没有封装代码&#xff0c;鉴于此&#xff0c;本章主要内容如下: ROS常用API介绍&#xff1b;ROS中自定义头文件与源文件的使用。…

【UniApp开发小程序】私聊功能后端实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】

文章目录 声明聊天数据查询管理数据库设计VoControllerServiceMapper WebSocket引入为什么使用WebSocket依赖配置类WebSocket服务 RabbitMQ引入为什么使用消息队列依赖启动类添加注解常量类使用配置类创建队列、交换机、绑定关系消息监听器发送消息到消息队列 延时任务为什么使…

ZooKeeper技术内幕

文章目录 1、系统模型1.1、数据模型1.2、节点特性1.2.1、节点类型 1.3、版本——保证分布式数据原子性操作1.4、 Watcher——数据变更的通知1.5、ACL——保障数据的安全1.5.1、权限模式&#xff1a;Scheme1.5.2、授权对象&#xff1a;ID1.5.3、权限扩展体系 2、序列化与协议2.1…

ChatGPT 制作可视化柱形图突出显示第1名与最后1名

对比分析柱形图的用法。在图表中显示最大值与最小值。 像这样的动态图表的展示只需要给ChatGPT,AIGC,OpenAI 发送一个指令就可以了, 人工智能会快速的写出HTML与JS代码来实现。 请使用HTML,JS,Echarts完成一个对比分析柱形图,在图表中突出显示第1名和最后1名用单独一种不…

Pytest参数详解 — 基于命令行模式

1、--collect-only 查看在给定的配置下哪些测试用例会被执行 2、-k 使用表达式来指定希望运行的测试用例。如果测试名是唯一的或者多个测试名的前缀或者后缀相同&#xff0c;可以使用表达式来快速定位&#xff0c;例如&#xff1a; 命令行-k参数.png 3、-m 标记&#xff0…

h5 ws 客户端 监听ws服务器广播的信息

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>AI智能写作</title><!-- Bootstrap CSS --><meta charset"utf-8"><meta name"viewport" content"widt…

划分字母区间【贪心算法】

划分字母区间 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。返回一个表示每个字符串片段的长度的列表。…

外包干了2个月,技术退步明显...

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

【Hadoop】Hadoop入门概念简介

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的…

Unreal5(虚幻5)学习记录 快捷键

虚幻5学习记录 快捷键 世界场景中漫游&#xff08;镜头移动): 按住鼠标右键 键盘的W(前) S(后) A(左) D(右) E(上) Q(下)键 透视 透视 ALTG 上部分 ALTJ 底视图ALTSHIFTJ 左视图 ALTK 右视图 ALTSHIFTK 前视图 ALTH 后视图 ALTSHIFTH 内容浏览器 Ctrl Space 内容浏览器…

Kind创建本地环境安装Ingress

目录 1.K8s什么要使用Ingress 2.在本地K8s集群安装Nginx Ingress controller 2.1.使用Kind创建本地集群 2.1.1.创建kind配置文件 2.1.2.执行创建命令 2.2.找到和当前k8s版本匹配的Ingress版本 2.2.1.查看当前的K8s版本 2.2.2.在官网中找到对应的合适版本 2.3.按照版本安…