UICollectionView实现多九宫格拖拽

最新推荐文章于 2022-01-12 16:45:38 发布
最新推荐文章于 2022-01-12 16:45:38 发布
阅读量209 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goof/article/details/101460411
版权

>  我这里要记录使用UICollectionView实现类似九宫格的拖拽的效果，类似iPhone桌面的SpringBoard，包括文件夹的合并

* SpringBoard：这是我第一次实现类似的效果，前期做了比较充分的调研工作。找了很多开源库进行研究，虽然有很多类似的实现，但是基本上都只局限于一个UICollectionView内不同的cell之间相互拖拽，跟我的目标还是有很多不同。其中两个库对我有重大借鉴意义。它们分别是LxGridView和i3-dragndrop。



以下是SpringBoard的粗糙效果动画:

97652-aa3a6e6612817f43.gif
模拟iPhone 桌面效果

文件结构如下图：

97652-cb079819b59cb478.png
文件目录结构

源码地址：https://github.com/TimBao/TBSpringBoard

Tim_包
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UICollectionView--九宫格
Obses_sion的博客
08-21 1072
UICollectionView
UICollectionView的详细使用，以及九宫格实现
weixin_30764137的博客
04-06 220
http://blog.csdn.net/Apple_app/article/details/38867123 http://www.xuebuyuan.com/648696.html http://www.2cto.com/kf/201409/335663.html 转载于:https://www.cnblogs.com/angongIT/p/4395439.html
iOS- 用UICollectionViewController 来进行横竖屏九宫格布局
alexhua1444的博客
02-13 323
1.简单说说UICollectionViewController　　　　　　　　　　　　　　　　　 我们在做九宫格布局时，可以使用UIScrollView，也可以使用UICollectionViewController。 当我们用UICollectionViewController来进行九宫格布局，可以更加方便，省去很多麻烦，例如横竖屏的适配。 UICollectio...
Android-Android图片选择预览九宫格图片控件拖拽排序九宫格图片控件
08-13
Android 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件
ios仿支付宝可拖拽按钮九宫格界面
06-12
ios仿支付宝可拖拽按钮九宫格界面，按钮可以拖拽自动布局动画，可以删除
js实现九宫格拼图小游戏
10-20
【JavaScript 九宫格拼图小游戏实现详解】 在本文中，我们将探讨如何使用JavaScript实现一个简单的九宫格拼图小游戏。这个小游戏的核心在于将一个完整的图像分割成9个小方块，然后随机打乱顺序，玩家需要通过拖动...
jquery实现九宫格图片拖动效果
07-19
在本文中，我们将深入探讨如何使用jQuery库来实现一个九宫格图片拖动效果，让图片可以在网格中自由拖拽并排序。这个功能通常应用于图片展示、拼图游戏或者个性化布局的设计中，能够提供用户友好的交互体验。 首先，...
h5实现九宫格拼图
09-03
在H5中实现一个九宫格拼图游戏是一项有趣且具有挑战性的任务，它涉及到HTML、CSS和JavaScript等核心技术。让我们深入探讨一下如何利用这些技术来构建这样的游戏。 首先，我们需要理解九宫格拼图的基本原理。游戏的...
Android 仿微信发动态九宫格拖拽、删除功能
08-25
Android 仿微信发动态九宫格拖拽、删除功能是 Android 开发中一个常见的需求，主要介绍了如何实现 Android 仿微信发动态九宫格拖拽、删除功能，这项技术可以应用于社交媒体、照片分享等领域。本文将详细介绍如何...
自定义九宫格图片布局
02-19
本教程将详细讲解如何通过自定义ViewGroup来实现一个功能丰富的九宫格图片布局，支持图片的编辑、删除和添加。 首先，我们需要创建一个新的Java类，继承自`ViewGroup`。这个类将作为九宫格的基础容器，我们称之为`...
九宫格图片(可拖拽)
02-27
自己项目用到的一个功能 实现九宫格显示图片 支持拍照和图库，可以拖拽排序。基本可以直接在项目使用
使用iOS控件UICollectionView生成可拖动的桌面的实例
08-31
本篇文章主要介绍了使用iOS控件UICollectionView生成可拖动的桌面，具有一定的参考价值，有需要的可以了解一下。
ios-利用UICollectionView实现的拖拽排序 XLChannelControl.zip
07-11
Demo下载地址： https://github.com/mengxianliang/XLChannelControl 原理解析博文地址： http://blog.csdn.net/u013282507/article/details/54374952
iOS ---用collectionView实现九宫格图片调整顺序，任意拖拽
weixin_43259805的博客
01-12 2308
用collectionView实现九宫格图片调整顺序，任意拖拽
iOS UICollectionView实现九宫格效果!!!
weixin_30552635的博客
08-01 389
总体来说UICollectionView和UITableView大体上比较相似,唯一的不同就是我们在使用UICollectionView的时候需要自定义UICollectionView的cell,而且它还需要先注册xib,同时 我们还要实现 UICollectionViewDelegate,UICollectionViewDataSource代理协议,如果必要的话也要实现 UICollecti...
九宫格拖拽与互换
bachou1292的博客
09-07 590
以上是一个九宫格，要想实现元素的拖拽和互换，如点击A到E的位置是，A会拖拽到E的位置，E会自动返回到A的位置；代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>九宫格拖拽与交换</title> &lt...
iOS 使用拖拽，在一个自定义ViewCell中显示多个cell样式
WangQingLei0307的博客
07-28 722
当我们应用TableView的事后避免不了，会应用到多种自定义cell的样式，我们可以通过，创建多个ViewCell通过判断来实现，但是这样太浪费资源。我们要更简单的来实现。 我们要在一个ViewCell中创建多个ViewCell，并且关联到一个类 例如： 1，我们先创建一个类继承tableviewcell，并勾选Xib，这样类里便有了一个视图 2，我们在右下角选择搜索，c
使用iOS 控件 UICollectionView 生成可拖动的桌面
shenjie12345678的专栏
06-15 2158
一个App受欢迎的程度，一方面来源于它本身为用户提供便捷的功能，另一方面则来源于它的UI。UI是用户体验重要的组成部分，构成UI的的元素恰恰离不开那些看似独立的控件。在开发的过程中，大家对UITableView应该很熟悉吧！确实UITableView在处理数据显示方面有着很强大的功能，例如网红们使用的微博，微信社交软件的聊天界面等等，这种流式布局使用UITableView简直最合适不过了；但毕竟U
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
最新发布
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
js实现九宫格单元格拖拽效果
05-13
你可以使用HTML5中的draggable属性和JavaScript来实现九宫格单元格的拖拽效果。以下是一个简单的实现： HTML: ``` <div class="grid"> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> <div class="cell" draggable="true"></div> </div> ``` CSS: ``` .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .cell { width: 100%; height: 100%; background-color: #ddd; } ``` JavaScript: ``` var cells = document.querySelectorAll('.cell'); var draggingCell = null; for (var i = 0; i < cells.length; i++) { var cell = cells[i]; cell.addEventListener('dragstart', function() { draggingCell = this; setTimeout(function() { draggingCell.style.display = 'none'; }, 0); }); cell.addEventListener('dragend', function() { draggingCell.style.display = 'block'; draggingCell = null; }); cell.addEventListener('dragover', function(e) { e.preventDefault(); }); cell.addEventListener('dragenter', function(e) { e.preventDefault(); this.classList.add('hover'); }); cell.addEventListener('dragleave', function() { this.classList.remove('hover'); }); cell.addEventListener('drop', function() { if (this !== draggingCell) { var temp = this.innerHTML; this.innerHTML = draggingCell.innerHTML; draggingCell.innerHTML = temp; } this.classList.remove('hover'); }); } ``` 这段代码首先选择所有的单元格，然后为每个单元格添加拖拽事件监听器。当一个单元格开始被拖拽时，我们把它的引用存储在draggingCell变量中，并且在0ms后将其隐藏。当单元格拖拽结束时，我们恢复其显示状态并将draggingCell变量设置为null。 当一个单元格被拖拽到另一个单元格上时，我们使用preventDefault()方法来防止默认的drop事件发生，并且给目标单元格添加一个.hover类。当拖拽离开一个单元格时，我们移除.hover类。当一个单元格被放置时，我们检查是否目标单元格不是当前拖拽的单元格，如果不是，我们交换它们的innerHTML。 最后，我们使用CSS来布局九宫格，并将每个单元格设置为可拖拽的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值