react card 拖拽_1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

最新推荐文章于 2024-08-16 08:25:29 发布
最新推荐文章于 2024-08-16 08:25:29 发布
阅读量1.3k 收藏
点赞数
文章标签： react card 拖拽 wpf 拖拽过程中不进行选中item 卡片的sak为不支持的类型
本文介绍了如何使用React快速创建一个卡片拖拽组件，支持卡片位置交换、自动顺移和数据实时更新。组件允许自定义样式和内容，提供startDrag、switchPosition和finishDrag等事件，适用于不同场景。同时，文章讨论了组件的未来计划和待修复问题。
摘要由CSDN通过智能技术生成

df790f4a403b14b7d46d6925dddf377c.png

作者：裂泉

译者：cyz980908

来源：掘金

首先演示一下最终效果：

流畅的拖动和交换位置效果，并实时更新数据

235349bdfb10818ad9e7997bf448517c.png

支持组件的样式和内容自定义

6276b8b4858efe0d9792011c6b4565f7.png
这是这次系列文章的 第一篇，我自己封装了一个 用vue实现的拖拽排列卡片组件，并且发布到npm，详细地记录下来了整体制作过程。总共有三篇文章，介绍组件的制作思路和遇到的问题，以及在发布到npm上并下载使用的过程中，发生了什么问题并如何解决。

  •  第一篇为组件封装后的使用文档及介绍

  •  第二篇为组件的实现思路以及细节

  •  第三篇为将组件打包并上传至npm，如何实现按需加载和下载后使用的问题

这是vue实现的拖动卡片组件，主要实现了：

  • 拖动卡片与其他卡片的位置更换，并且其他卡片根据拖动的位置自动顺移，位置数据实时更新

  • 拖动的时候可使用鼠标滚动

  • 卡片根据数据生成，所有参数和内容都是可以自定义的，方便应用于不同场景

  • 不同操作的事件都可获取到，拖动后的位置数据会实时更新

  • 可以全局安装和按需加载

如何使用？

下载carddragger
npm install carddragger
复制代码
最低0.47元/天 解锁文章
weixin_39562606
关注
卡片拖拽 onDrag事件
renxumei的博客
09-16 596
卡片拖拽 onDrag事件 // 拖拽开始时，将被拖卡片数据存放到state，并让被拖拽元素原本的位置显示被拖拽样式， // 设置一个延迟，解决一触发拖拽就给该元素加上了绝对定位的蒙版，导致拖拽不动的问题 onDragStart = (e, item) => { setTimeout(() => { this.setState({ courseCard: item }) }, 1000 * 0.05) } onDragE
移动端卡片拖动切换效果_react-swipes基于React的移动端卡片滑动组件
weixin_39683526的博客
01-17 1006
react-swipes打造最好用的React 移动端卡片滑动 组件。已支持卡片自动播放，配置加入 autoPlay 参数即可。为什么要造轮子目前react component里面 基于移动端轮播/幻灯片 组件，最熟悉应该是react-swipe这个库了。且看这个组件的构成：react-swipe: 引入swipe-js-iso,创建react组件swipe-js-iso: 基于swipe.js的...
React-基于react的拖拽并自动排序
08-14
基于react 的拖拽并自动排序
react-dnd实现卡片拖拽排序
a_wtf_pgm的博客
11-26 4218
最近工作中遇到一个需求，需要对管理系统中的图片进行拖拽排序的功能 具体用到了react-dnd来实现 GIthub地址：https://github.com/goccult/drag-sort-test 下面是一个利用react-dnd实现的拖拽排序小Demo 首先在react项目中执行以下命令 yarn add react-dnd yarn add react-dnd-htm...
vue项目实现堆叠卡片拖动切换效果
qq_44957574的博客
07-07 657
本文实现了在vue3项目中卡片堆叠切换的效果，卡片切换是比较常用的UI交互方式，非常的美观以及操作方便，是前端学习者的必备技能之一。
React 组件封装之 Card 卡片
杏子
09-29 5281
React 组件封装之 Card一、Button 按钮二、使用案例三、API 使用指南四、源代码 一、Button 按钮 组件说明： 使列表成为卡片形式的布局。 效果展示： 实心铺满宽度为100%的效果 二、使用案例 import {Button} from 'share'; import React from 'react'; export default class Example exte...
react按钮拖拽_React 实现拖拽功能的示例代码
weixin_39599166的博客
12-22 517
本文介绍了React 实现拖拽功能的示例代码，分享给大家，具体如下：实现效果：因为工作中会用到 JIRA 所以想实现一下相似的功能，顺便学习一下 H5 的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码，没有解释。图片默认可以拖动，其他元素的拖动效果同图片。正常的 div 是不能被拖动的，鼠标点击选择后移动没有效果，需要加draggable="tr...
react 拖拽连接插件_react可拖动的好用的树结构插件
weixin_28932927的博客
12-29 1073
react tree 可拖动树结构：github地址：安装：NPMnpm install react-sortable-tree –saveYARNyarn add react-sortable-tree引用import SortableTree from ‘react-sortable-tree’;import ‘react-sortable-tree/style.css’;使用此处我是做成可公...
react项目使用react-dnd实现拖拽排序
02-26
在React项目中，拖拽排序是一项常见的交互需求，可以提供用户友好的界面体验。React DND（Drag and Drop）库是实现这一功能的利器。它允许开发者轻松地将拖放功能集成到React组件中，无需深入理解底层浏览器事件。...
基于react-draggable拖拽的antd-card卡片限定范围内拖拽
L9009121314的博客
07-04 2724
最近有个项目需求是点击问号显示提示窗口，窗口固定不随滚动条滚动，并可在范围内拖拽。又不影响下层表单输入。 我想到用antd-card结合react-draggable来实现。这里记录下实现代码： import { Modal, Button, Card } from 'antd'; import Draggable from 'react-draggable'; class App extends React.Component { constructor(props) { .
React-Cards:这些是我几天前尝试用React构建的一些卡片
05-28
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webp
带弹性摇摆效果的卡片js拖拽插件swing
12-11
swing是一款可以容器中的卡片元素拖拽到容器外的js拖拽插件。该拖拽插件在拖动卡片元素到容器外后，放下卡片时有很酷的卡片弹性左右摇摆效果。如果拖动距离不够，卡片将被拉回容器中。
react-card-component：React卡组件Libaray
02-06
React卡组件 执照 麻省理工学院执照 安装 npm i react-card-componet 示例页面 用法（Parameta） Component卡 import { Card } from 'react-card-component' ; const NewCard = ( ) => < Card> < div> HelloWorld < / div > < / Card > ) ; Common Props风格 import { Card } from 'react-card-component' ; const NewCard = ( ) => < Car
CSS3和JS炫酷3D拖拽卡片动画特效
07-09
CSS3和JS炫酷3D拖拽卡片动画特效
react-cardstack:React组件实现类似于iOS存折应用程序的UI
05-02
React卡堆栈 该组件专为React而建，使您可以实现类似于iOS存折应用程序的UI。 安装 react-cardstack需要使用React 15.3.0或更高版本。 npm install --save react-cardstack 演示与范例 现场演示： 要在本地构建示例，请克隆此存储库，然后运行： npm install npm start Then open localhost:8080 in a browser. 用法 React Card Stack导出具有两个组件的对象。 这些是CardStack和Card 。 CardStack组件负责保持其子Card组件的状态。 但是，这是抽象的，这使得使用该组件更加简单。 注意：至少必须有两个Card实例作为CardStack的子级，否则该组件将抛出error 。 React Card Stack的使用示例如下： im
react快速拖拽配置echart图形
08-10
写了一个简单的可实现通过配置文件，对不同数据形态直接拖拽生成echart图表；
React 使用react-sortable-hoc 实现拖拽效果
张晓健的博客
03-27 1640
改成下面这样就能使用了，讲以前用到 arrayMove 的地方都替换成 arrayMoveImmutable；在react中实现拖拽效果我使用的是react-sortable-hoc 这个库，首先安装这个库，在我的项目中会报错，应该是版本更新替换了这个方法，
探索React应用新境界：React Cards
最新发布
gitblog_00590的博客
08-16 228
探索React应用新境界：React Cards reactcardsdevcards for react项目地址:https://gitcode.com/gh_mirrors/re/reactcards React Cards 是一个灵感源自Bruce Hauman的devcards项目的创新工具。它为React开发者提供了一种视觉化的REPL（Read-Eval-Print Loop）体验，...
react card效果之数字卡片
songyajun_zzuli的专栏
06-16 1413
本系列文章只是为了记录使用的插件及其他样式，依托于antd+typescript+less，不记录数据加载过程及路由指向。 简单卡片效果-01： 显示效果： tsx代码： return ( <div className="container"> <div className="dcards"> <Row> <Col span={4} className="card">
React拖拽功能实现详解及示例代码
"本文提供了一个React实现拖拽功能的示例代码，旨在帮助开发者理解如何在React应用中创建拖放功能。" 在React中实现拖拽功能，通常涉及到HTML5的拖放API。这些API允许用户与页面上的元素进行交互，将元素从一处拖动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值