Electron 拖拽 tabs 生成新窗口，再次拖拽到原位置可以吸附到 tabs 中

Question

嗨，老师
想要实现一个这样的效果，假如下图就是 mainWindow
头部会有一些描述信息、小菜单之类的
中间是一个 tabs
下面是内容区域

现在需求是，类似浏览器 标签页 的交互方式：

• tabs 支持拖拽，左右滑动，是与其他 tab 交换位置
• 上下拖动，超出当前 tabs 区域后，会有一个缩略图跟随鼠标；鼠标释放，会生成一个新的窗体出来（多进程、从任务栏看变成了两个窗口）
• 新窗口布局保持与 mainWindow 同样的布局，只不过只有一个 tab
• 新窗口拖动，如果鼠标位置到了 mainWindow 的 tabs 区域，会再次变为一个普通的 tab，新窗口销毁（任务栏看，只有一个mainWindow）

这种需求需要怎么实现，不知道描述的清不清楚，请问老师有见过类似的需求，或有类似的库嘛

Answer 1

张轩 2022-06-02 09:43:14

同学你好

需求描述的比较清楚，实现我认为是比较复杂的，我搜寻了一下，发现这个第三方库比较满足你的需求。

https://github.com/brrd/electron-tabs

就是为 electron 的 tabs 所设计的，你可以参考一下。

• 提问者 烟小琦 #1

  嗯嗯，谢谢老师，不过我看了下，它这个只是实现了左右拖动的 tabs 交换位置的效果
  拖动生成新进程这块、还有怎么实现截图（缩略图）、怎么让截图跟随鼠标移动等等的，可能还是得结合着其他方案来搞

• 张轩 回复 提问者 烟小琦 #2

  是的 你这个需求还是比较有难度的 市面上也没有成熟的解决方案 只能靠自己探索了