07#Web 实战:仿 GitHub 个人主页项目拖拽排序
实现效果图
GitHub 和 Gitee 个人主页中可以对自己的项目进行拖拽排序,于是我就想自己实现一个。本随笔只是记录一下大概的实现思路,如果感兴趣的小伙伴可以通过代码和本随笔的说明去理解实现过程。我的 Gitee 和 GitHub 地址。
思路构思
要实现元素拖拽可替换位置,就必须要锁定每一个元素的具体位置,且要直到两个元素的 transform: translate()
。从代码上看,这是一个二维数组。从界面上看,就是一个网格布局。
元素的布局不可能通过display: grid
来进行,得用transform: translate()
,实现元素得平移,且需要使用绝对和相对定位。
静态界面代码
这里给出初始的静态界面代码,draggable 表示开启这个元素的可拖拽功能:
<div class="drop-box">
<div class="drag-item item-0">
<div class="ontology" draggable="true">Item 0</div>
</div>
<div class="drag-item item-1">
<div class="ontology" draggable="true">Item 1</div>
</div>
<div class="drag-item item-2">
<div class="ontology" draggable="true">Item 2</div>
</div>
<div class="drag-item item-3">
<div class="ontology" draggable="true">Item 3</div>
</div>
</div>
老样子,我喜欢把不必要的代码给省略掉,如果样式不全,去我的仓库复制:
.drop-box {
transition: all 0.5s ease-in-out;
box-sizing: border-box;
/* 在这里设置 drop-box 的高宽 */
width: 420px;
height: 300px;
/* 在这里设置 drop-box 的高宽 */
border-radius: 10px;
border: 1px solid #cccccc;
position: relative;
}
.drag-item {
transition: all 0.5s ease-in-out;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #cccccc;
width: 200px;
height: 50%;
position: absolute;
top: 0;
left: 0;
}
.drag-item > div.ontology {
width: 100%;
height: 100%;
}
构建二维数组
拖拽每一个元素不代表真实地改变了 DOM 所在的位置。给这些元素设置监听器,并获取 index,拖拽之后都不会影响它的索引值。
上面给的 HTML 结构,在界面上生成之后,从 1 ~ 4 这样的序列是不会改变的,即便是我们修改了它的 translate(平移元素)之后,也不会影响它原本在 DOM 树上的顺序。
为了方便在代码中修改元素的transform: translate()
,我们需要在页面载入时就虚拟化这些元素到二维数组中。元素虚拟化进二维数组的目的是让编程更加易于使用。
let virtualGridElem = [];
function initVirtualGrid(elem, init) {
let elemIndex = 0;
for (let rowIndex = 0; rowIndex < init.rowNum; rowIndex++) {
virtualGridElem[rowIndex] = [];
for (let colIndex = 0; colIndex < init.colNum; colIndex++) {
$(elem[elemIndex]).attr("data-row-index", rowIndex);
$(elem[elemIndex]).attr("data-col-index", colIndex);
$(elem[elemIndex]).css({ width: init.width, height: init.height, transform: gridVals[rowIndex][colIndex] });
initEvents(elem[elemIndex], elemIndex, rowIndex, colIndex);
virtualGridElem[rowIndex][colIndex] = elem[elemIndex++];
}
}
}
在虚拟化之前,需要获得这个界面中的网格信息,即网格有多少行,每一行有多少列。
let gridVals = [];
function initGridVals(elNum, colNum, rowMaxWidth, colMaxWidth) {
let rowNum = Math.ceil(elNum / colNum);
let widthPerRow = rowMaxWidth / colNum;
let heightPerCol = colMaxWidth / rowNum;
let translateX = 0;
for (let rowIndex = 0; rowIndex < rowNum; rowIndex++) {
let translateY = 0;
gridVals[rowIndex] = [];
for (let colIndex = 0; colIndex < colNum; colIndex++) {
gridVals[rowIndex][colIndex] = `translate(${translateY}px, ${translateX}px)`;
translateY += widthPerRow;
}
translateX += heightPerCol;
}
return {
width: widthPerRow,
height: heightPerCol,
rowNum: rowNum,
colNum: colNum
};
}
到目前为止,得到了两个重要的二维数组:virtualGridElem 和 gridVals。virtualGridElem 不会被改变,一直保持原有的位置,与实际的可拖拽元素的 DOM 树保持一致。gridVals 会与 virtualGridElem 发生出入,会根据操作而修改。
let dragItem = $(".drop-box").children(".drag-item");
initVirtualGrid(dragItem, initGridVals($(dragItem).length, 2, 420, 300));
拖拽排序功能
拖拽在 HTML5 就已经存在,drop、dragover、dragstart、dragend 都是实现本案例中最重要的几个监听事件。其中 drop 表示可拖拽元素到目标元素之后的元素,即 item1 拖拽到 item2 之后,获取 item2 的元素。
function initEvents(elem, index, rowIndex, colIndex) {
// drop 是获取拖拽目标元素
$(elem).on("drop", e => {
e.preventDefault();
$(virtualGridElem[rowIndex][colIndex]).css({ transform: gridVals[currRowIndex][currColIndex] });
$(virtualGridElem[currRowIndex][currColIndex]).css({ transform: gridVals[rowIndex][colIndex] });
// let tempTargetGridVals = gridVals[currRowIndex][currColIndex];
// gridVals[currRowIndex][currColIndex] = gridVals[rowIndex][colIndex];
// gridVals[rowIndex][colIndex] = tempTargetGridVals;
[gridVals[currRowIndex][currColIndex], gridVals[rowIndex][colIndex]] = [gridVals[rowIndex][colIndex], gridVals[currRowIndex][currColIndex]];
});
// 必须写这一段代码,否则 drop 监听器不生效
$(elem).on("dragover", e => {
e.preventDefault();
});
// drag 相关的监听是对拖拽元素目标有效的
let ontology = $(elem).children(".ontology");
$(ontology).on("dragstart", e => {
currRowIndex = rowIndex;
currColIndex = colIndex;
$(elem).css({ opacity: "0.5" });
});
$(ontology).on("dragend", e => {
$(elem).css({ opacity: "1" });
});
}
代码最多的是 drop 事件,在开始拖拽时,也就是获取拖拽的元素信息,在这里我们要把这个拖拽的元素透明度调低一点,表示被拖拽中的元素。之后,记录改拖拽元素的二维索引值,rowIndex、colIndex,记录为 currXxxIndex。
在拖拽完成之后,就要触发 drop 事件。drop 事件中,对 gridVals 进行值的交替。ES6 中解构赋值不需要中间变量临时存储,就可以实现值交换:
let x = 1, y = 2;
[x, y] = [y, x]
替换之后,x = 2,y = 1。
结束语
具体实现过程请去看我仓库中的代码 Gitee 和 GitHub 地址。喜欢的话,请点个赞再走哦!后续带来更多的 Web 实践。
07#Web 实战:仿 GitHub 个人主页项目拖拽排序的更多相关文章
- 07#Web 实战:实现 GitHub 个人主页项目拖拽排序
实现效果图 GitHub 和 Gitee 个人主页中可以对自己的项目进行拖拽排序,于是我就想自己实现一个.本随笔只是记录一下大概的实现思路,如果感兴趣的小伙伴可以通过代码和本随笔的说明去理解实现过程. ...
- Android高级控件(六)——自定义ListView高仿一个QQ可拖拽列表的实现
Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- HTML5实战与剖析之原生拖拽(一拖拽历史概述)
提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...
- React造轮子:拖拽排序组件「Dragact」
先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...
- RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
- RecyclerView拖拽排序;
效果就是这样,RecyclerView列表可拖拽排序,可删除,可添加: RecyclerView给我们提供了一个手势器: ItemTouchHelper helper = new ItemTouchH ...
随机推荐
- 【Spark】Day03-Spark SQL:DataFrame、DataSet、sql编程与转换、项目实战(区域热门商品)
一.概述 1.介绍 将Spark SQL转换成RDD,然后提交到集群执行[对比hive] 提供2个编程抽象:DataFrame&DataSet 可以使用SQL和DatasetAPI与Spark ...
- ExcelToObject.NPOI 两行代码导出Excel报表、读取Excel数据
简介 作为一个dotnet开发者,经常面对业务系统中大量报表导入导出,经常写了一堆的重复代码.最近发现一个操作excel的神器:ExcelToObject.NPOI,两行代码就能导出一个报表,两行代码 ...
- 常用的渗透测试工具——SQLMap安装
SQLMap是一个自动化的SQL注入工具,其主要功能是扫描.发现并利用给定URL的SQL注入漏洞,内置了很多绕过插件,支持的数据库是MySQL.Qracle.PostgreSQL.Microsoft ...
- python 之集合(set)
集合是一个无序的,不允许重复的元素列表,根据这个特性,可以利用集合对列表进行去重操作 集合创建 # 集合中不能含list.dict set2 = {"rice", 1, (True ...
- Kagol:2022年最值得推荐的前端开源文章
大家好,我是 Kagol,Vue DevUI 作者,从2020年开始一直专注于前端开源组件库的建设,在前端开源组件库.开源社区运营方面积累了一些经验,2020年主要的创作也是围绕前端组件库和开源两个主 ...
- 02- 快速入门MybatisPlus
创建表 现有一张 User 表,其表结构如下: id name age email 1 Jone 18 test1@baomidou.com 2 Jack 20 test2@baomidou.com ...
- vulnhub靶场之HACKER KID: 1.0.1
准备: 攻击机:虚拟机kali.本机win10. 靶机:Hacker kid: 1.0.1,下载地址:https://download.vulnhub.com/hackerkid/Hacker_Kid ...
- (5)go-micro微服务domain层开发
目录 一 domain层介绍说明 二 model层开发 三 repository层开发 四 service层开发 五 最后 一 domain层介绍说明 domain层专注于数据库数据领域开发,我们把数 ...
- linux 基础之输入输出重定向
输入输出重定向 输出重定向 正确命令 > 文件 (覆盖) 正确命令 >> 文件(追加) 错误命令 2> 文件(覆盖) 错误命令 2>>文件(追加) 命令> 文 ...
- 第三方模块的下载与使用 requests模块 openpyxl模块
今日内容 第三方模块下载操作 第三方模块: 别人写的魔魁啊 一般情况下都很强大 python中模块很多 如果想使用第三方模块 第一次必须先下载 后面就可以反复使用 =内置模块 下载第三方模块的方式: ...