皮皮网

1.sortableԴ?源码?
2.Vue中使用Sortable
3.使用 SortableJS 组件的 Blazor 可排序列表

sortableԴ??

       年末学习新技能，react拖拽组件与高效代码调试技巧不容错过！源码学习第三方库如react-sortable-hoc时，源码首先要掌握的源码就是调试技巧。首先，源码创建一个新项目，源码赤月风霜源码尝试简单的源码react-sortable-hoc示例，然后设置断点进行调试。源码但注意，源码直接在打包后的源码产物中打点是无用的，这时就需要启用sourcemap来映射源代码。源码在项目中开启sourcemap，源码unreal 源码 分析通过克隆并配置项目的源码rollup打包设置，确保调试时能访问源码。源码遇到只读源码文件时，源码检查CALL STACK，可能需要调整映射路径。若需修改node_modules中的文件，可使用patch-package避免覆盖。接下来，分析组件的初始化过程。SortableContainer负责管理，创建Manager对象并传递给子组件SortableElement。顺序回复源码SortableElement负责注册自身，SortableHandle则关注节点标识和事件绑定。理解事件触发顺序后，逐步探索handleStart、handlePress、handleSortMove等关键函数。handlePress利用克隆节点模拟拖拽，handleSortMove则调整节点位置并动画化排序，handleSortEnd则进行清理工作。react-sortable-hoc主要利用mousemove和touchmove事件，结合css3动画实现拖拽和排序。接口生成源码但要注意，它使用了不推荐的reactDom.findDomNodeapi，以及仅限于类组件使用。学习过程中，还可以记录一些实用的函数，如获取元素偏移、移动数组元素和过滤对象属性等。提升调试效率和理解库的工作原理，是学习react拖拽组件的重要一环。希望这些技巧能帮助你在年末的学习旅程中更顺利，别忘了分享给有需要的鸡腿辅助源码朋友哦！

Vue中使用Sortable

        之前开发一个后台管理系统，里面用到了 Vue 和 Element-UI 这个组件库，遇到一个挺有意思的问题，和大家分享一下。

        场景是这样，在一个列表展示页上，我使用了 Element-UI 的表格组件，新的需求是在原表格的基础上支持拖拽排序。但是原有的组件本身不支持拖拽排序，而且由于是直接引入的 Element-UI ，不方便修改它的源码，所以比较可行的方法只能是直接操作DOM。

        具体的做法是在 mounted 生命周期函数里，对 this.$el 进行真实DOM的操作，监听 drag 的一系列事件，在事件回调里移动DOM，并更新data。

        HTML5 Drag 事件还是挺多的，和 Touch 事件差不多，自己手工实现也可以，不过这里就偷了个懒，直接用了一个开源的 Sortable 库，直接传入 this.$el ，监听封装后的回调，并且根据Vue的开发模式，在移动DOM的回调里更新实际的Data数据，保持数据和DOM的一致性。

        如果你以为到这就结束了，那就大错特错，偷过的懒迟早要还。。。本以为这个方案是很美好的，没想到刚想调试一下，就出现了诡异的现象：A和B拖拽交换位置之后，B和A又神奇得换回去了！这是怎么回事？似乎我们的操作没有什么问题，在真实DOM移动了之后，我们也移动了相应的 data ，数据数组的顺序和渲染出DOM的顺序应该是一致的。

        问题出在哪里？我们回忆一下Vue的实现原理，在Vue2.0之前是通过 defineProperty 依赖注入和跟踪的方式实现双向绑定。针对v-for数组指令，如果指定了唯一的Key，则会通过高效的Diff算法计算出数组内元素的差异，进行最少的移动或删除操作。而Vue2.0之后在引入了 Virtual Dom 之后， Children 元素的 Dom Diff 算法和前者其实是相似的，唯一的区别就是，2.0之前Diff直接针对 v-for 指令的数组对象，2.0之后则针对 Virtual Dom 。DOM Diff算法在这里不再赘述，这里解释的比较清楚 virtual-dom diff算法

        假设我们的列表元素数组是

        渲染出来后的DOM节点是

        那么Virtual Dom对应的结构就是

        假设拖拽排序之后，真实的DOM变为

        此时我们只操作了真实DOM，改编了它的位置，而Virtual Dom的结构并没有改变，依然是

        此时我们把列表元素也按照真实DOM排序后变成

        这时候根据Diff算法，计算出的Patch为，VNode前两项是同类型的节点，所以直接更新，即把$A节点更新成$B，把$B节点更新成$A，真实DOM又变回了

        所以就出现了拖拽之后又被Patch算法更新了一次的问题，操作路径可以简单理解为

        根本原因是 Virtual DOM 和 真实DOM 之间出现了不一致。

        所以在Vue2.0以前，因为没有引入 Virtual DOM ，这个问题是不存在的。

        在使用Vue框架的时候要尽量避免直接操作DOM

        3.暴力解决！不走patch更新，通过v-if设置，直接重新渲染一遍。当然不建议这么做，只是提供这种思路~

        所以，我们平时在使用框架的时候，也要去了解框架的实现原理的，否则遇到一些棘手的情况就会无从下手~

使用 SortableJS 组件的 Blazor 可排序列表

       作者：Burke Holland 排版：Alan Wang

       在 Web 应用程序中，一个常见功能部分是可排序列表。Blazor 开发者们可能怀念 SortableJS 这个强大的 JavaScript 库。为了填充这个空白，Burke Holland 开发了一个名为 Blazor Sortable 的组件，将其开源在 GitHub 上，供开发者使用。

       Blazor Sortable 是一个社区组件，不是 Microsoft 的官方组件，但它提供了一种将 SortableJS 的功能集成到 Blazor 应用中的方法。Fluent UI 团队正在努力在未来版本的 Blazor 中集成可排序组件。

       访问演示页面：[提供演示链接]

       Burke 和 Jon Galloway，通过“Burke Learns Blazor”直播在 Twitch 和 .NET YouTube 上，共同致力于重建 theurlist.com 应用程序。如果您愿意加入他们的行列，提供帮助，将会非常欢迎。

       在 Blazor 中构建可排序列表组件的需求促使 Burke 开发了 Blazor Sortable。SortableJS 提供了丰富的功能，包括排序、列表之间的排序、项目克隆、过滤、自定义动画、腰部支持等。

       Blazor Sortable 包含了源代码和演示，用户只需要下载 Shared/SortableList.razor、Shared/SortableList.razor.css 和 Shared/SortableList.razor.js 文件。SortableList 组件是一个通用组件，需要提供项目列表和定义如何呈现列表中每个项目的模板。

       为了使列表变得可排序，只需处理 OnUpdate 事件并自定义排序逻辑。每当列表排序时，OnUpdate 事件会传递包含已移动项目旧索引和新索引的元组，通过 SortList 方法解构元组并移动列表中的项目。

       Blazor Sortable 支持多种功能，如列表之间的排序、克隆项目、过滤项目等。Burke 提供了一个示例，展示了如何在两个列表之间进行排序。

       在设置 SortableList 的样式时，您可以覆盖默认样式以适应特定需求。默认样式会隐藏“ghost”元素，产生拖动间隙。您可以修改 SortableItemTemplate 子项内的样式，但必须使用“::deep”修饰符确保样式生效。

       HTML5 的原生拖放支持在某些方面有局限性，无法提供理想的排序体验。因此，Blazor Sortable 选择使用 SortableJS 的 JavaScript 解决方案。如果您希望重新启用 HTML5 支持，只需在 SortableList.razor.razor.js 文件中删除 forceFallback: true 属性。

       Blazor Sortable 是一个开源社区项目，欢迎开发者探索其功能并提供反馈。Burke 鼓励大家使用 Blazor Sortable 来创建具有高级排序功能的 Blazor 应用程序。您可以通过 GitHub 页面查看 Blazor Sortable 并分享您的想法。