皮皮网

1.sortable.js 的源码研究
2.sortable.js 实现两个不同的表格之间表格行的拖曳的功能

sortable.js 的研究

       Sortable 是一个用于现代浏览器和触摸设备上的拖放列表重新排序的JavaScript库，无需依赖 jQuery。源码它支持多种框架，源码如 Meteor，源码AngularJS，源码React，源码图片模板源码Polymer，源码Vue，源码Ember，源码Knockout 等，源码以及任何 CSS 库，源码例如 Bootstrap。源码其官网为 sortablejs.github.io，源码提供丰富的源码示例与文档。

       Sortable 的源码网站源码和app源码的区别核心功能在于实现列表元素间的拖放排序，通过设置两个列表相同的 group 值，可以实现元素在列表间的拖放。此外，您还可以定义列表是否允许放弃、克隆以及接收元素的副本。当需要在列表内重复拖拽同一项目时，只需设置 revertClone: true，即可实现只放置一次的效果。

       通过 `pull` 和 `put` 方法，可以进一步扩展拖拽功能，让用户根据自己的需求判断项目放置位置。`sort` 选项用于控制列表元素是否可排序，`delay` 用于设置排序开始时间的毫秒单位，`swapThreshold` 确定交换区域的太阳风源码50专精源码百分比。通过 `invertSwap` 可以实现“在项目之间”排序的效果，而 `direction` 则允许用户自定义排序的方向。

       `touchStartThreshold` 用于在用户使用触摸设备（如移动设备）时设置排序延迟，避免误触发。`fallbackTolerance` 则用于在不支持 HTML5 的浏览器中模拟本地拖动阈值，确保在不同浏览器间的一致性。通过 `disabled` 可以禁用可排序功能，`handle` 选项允许用户定义拖动区域，避免文本选择。`filter` 和 `ghostClass` 用于控制项目的选择和背景显示效果，`chosenClass` 用于标记选中的项目。`forceFallback` 选项用于强制使用非 HTML5 浏览器的后备机制，`emptyInsertThreshold` 则用于控制拖动元素插入到空列表的条件。

       Sortable 提供了丰富的幸运飞艇源码平台完整源码事件对象和方法，如 `move`、`closest`、`toArray`、`sort`、`save`、`destroy` 等，允许开发者根据需求对列表进行操作。其中，`Sortable.create` 用于创建新的实例，`Sortable.active` 获取当前激活的实例，`Sortable.dragged` 和 `Sortable.ghost` 分别表示被拖动的元素和显示的占位符元素，`Sortable.clone` 则表示克隆元素。`Sortable.get` 用于获取特定元素的 Sortable 实例，`Sortable.mount` 则用于安装插件。防红源码1003防红源码

       Sortable 配套的插件如 `OnSpill`、`RevertOnSpill` 和 `RemoveOnSpill` 可以帮助实现特定的交互行为，如溢出恢复、克隆删除等。此外，还有 `swap` 插件允许元素交换，而不是仅进行排序。自动滚屏插件则在移动设备和 IE9 上提供更好的滚动体验。`MultiDrag` 插件允许用户一次性选择并拖动多个项目，放置后按原始顺序展开。

       Sortable 提供的配置选项丰富，能够灵活地适应不同场景下的需求，实现高效、自然的列表拖放交互。其强大的灵活性和广泛的兼容性，使其成为构建复杂交互界面时的有力工具。

sortable.js 实现两个不同的表格之间表格行的拖曳的功能

       是一个两年前的项目了。 最近增加一个新的模块，做音频和视频的通道。 为了做音视频的素材的替换，做的拖曳： 实现两个列数据不同的表格之间的行数据的替换，以及行的增加。 由于当初项目是基于jquery的，所以一下内容也是基于jquery的，但是思想和方法是通用的，需要的小伙伴，如果你的项目是基于vue的也可以看下思路。 也许会找到方法解决你现在的需求。

        如上的两个表格，我要实现的就是把右边表格的表格行拖曳到左边，但是左边的不可拖曳到右边； 且拖曳到右边表格的空白行的时候，就是添加； 如果是覆盖在表格行上，就是替换数据

        给 两个表格的tbody 分别赋予id ； 以上的#fileGetTableTbody 是右边的表格tbody的id，#trueFileTableDataTbody是左边的。

        group1 和 group2 中的各个参数与方法 其他的都不多说了（可以去看sortable.js的文档，非常的清晰）

        我只说一下两个group的参数，首先，name属性值必须设置一致（组名）； 然后是pull ，我这边采用clone的方式去拖曳，put：是可放置，group2是左边被放置的表格所以put设置为true

        在group1中的onMove方法中，设置evt.dragged.innerHTML = ''; 把拖曳的元素的内容置空；即能解决以上问题，而且还会隐藏插件默认的放置位置中元素内容的显示。

        给tbody增加一个tr ，这个 tr的高度，利用table的高度 - tbody的高度， 去动态设置。 写成下图所示的功能函数，在每次删除行，增加行的时候都执行一次，这样动态的利用 tr 去填充tbody剩余的空间，使得放置永远有效。 但是一定要记得，给tr中放置td, 否则不起作用

        丢失了，就把他找回来！ 方法就在group1的onMove方法和onEnd中，利用onEnd方法中的to字段判断当前放置的目标容器是什么，如果是自己本身，就把之前在onMove中存储的tr的子数据，赋值给 tr，这样就解决了。

        if(tr_length > evt.newIndex && tr_length !== 0 && class_have == false) ， 你们可根据自己需求做调整；

        所有的替换方法都在group2的onAdd中，由于我这边替换的时候，要求信号格式相符，以及音频默认信号格式，所以我多了很多判断。 但是我目前需要替换的数据只有素材名称和素材地址； 你们可仿照条件进行判断。

        以上全部，有些复杂，但是对于不同表格的表格行之间的拖曳，增加行，替换行数据，还是能实现的。

        如果有更好的方法，请留言，谢谢！