获得徽章 0
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
因为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函数搞定：
最后选定了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函数搞定：
展开
评论
点赞
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
#你的工作会被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);
})();
几行代码让你的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);
})();
展开
评论
4
赞了这篇文章
赞了这篇文章