获得徽章 0
wendao的头像
前端架构 @ OpenAges
因为sortablejs的一些问题(它操作dom,导致react的虚拟dom和实际dom出现“不一致”的问题),调研了一圈dnd相关的库,react-dnd(移动端有问题)、react-beautiful-dnd(atlassian不再维护开源版本,只维护内部版本了,可能是为了给竞品不再提供解决方案),还有一些其他的,也都不怎么维护了。
最后选定了dnd-kit,它的作者之前还开发过一个react-sortable-hoc,dnd-kit是他重新思考了dnd之后,开源的插件化的dnd库。
我做的应用比较复杂,严重依赖拖拽相关的功能库,研究一番dnd-kit之后,发现它的架构确实很不错,基本上只要你了解了它的功能和架构,所有拖拽相关的功能它都可以实现(吐槽一下它的文档和示例,写的太敷衍了,也没法直接拿来用)。
比如官方给的tree的例子是基于flat(tree)这个trick实现的,事实上,在很多场景中,这不是一个好的解决方案,尽管这样可以自带sortable的拖拽动画,反复折腾(实验)了好几天,终于基于他的onDragEnd实现了保留原数据结构下,tree item的拖拽,它其实有一个“feature”(bug),就是DndContext如果你的items引用没变的情况下,Context内部的数据是不会发生变化的,尽管渲染的数据发生变化了,而它内部数据没有发生变化(具体反映出来就是active或者over的sortable对象里面的原始数据一直不变),这就导致sortableConext提供的排序动画会出问题,最终其实很简单,一个deepClone函数搞定:
展开
wendao于2023-03-28 15:47发布的图片
评论
#你的工作会被ChatGPT取代吗#
几行代码让你的ChatGPT keepalive:(function () {
'use strict';

setInterval(function () {
// input a question into the chat box
const textarea = document.querySelector("textarea");

textarea.value =Math.random()>=0.5? "继续":Math.random()+"这个数有什么历史典故";
textarea.dispatchEvent(new KeyboardEvent("keydown", {
bubbles: true,
cancelable: true,
key: "Enter",
code: "Enter",
keyCode: 13
}));
}, 60000+Math.random()*10000);
})();
展开
评论
下一页
个人成就
文章被点赞 375
文章被阅读 23,133
掘力值 1,145
收藏集
44
关注标签
74
加入于