javascript - 前端有没有类似 vscode 面板拖拽调整宽高的库？
就是类似vscode里面的每一个标签页都可以拖来拖去，然后左右面板上下面板都可以调整宽度和高度
共有3个答案
有这些库可以，可以试试。Golden Layout，React Grid Layout，jQuery UI Layout，Vue Grid Layout
你好，请参见：
https://github.com/PanJiaChen/vue-split-pane
在前端开发中，确实存在类似VSCode面板拖拽调整宽高的库。这些库可以帮助开发者在Web应用中实现类似VSCode的面板布局，支持面板的拖拽、调整大小以及灵活的布局管理。以下是一些流行的库和解决方案：
1. Vue.js 相关库
- vue-split-pane：这是一个Vue.js组件，用于创建可调整大小的面板分割布局。它支持水平和垂直分割，并且可以通过拖动分割条来调整面板的大小。这个库非常适合Vue.js项目，因为它与Vue的响应式系统无缝集成。
2. React 相关库
- react-split-pane：与vue-split-pane类似，但专为React应用设计。这个库同样提供了易于使用的API来创建可调整大小的面板布局，支持水平和垂直分割。
3. 通用解决方案
- GoldenLayout：GoldenLayout是一个高度可配置的布局管理器，支持多种框架（包括但不限于React、Vue和Angular）。它允许你定义复杂的布局，如多行多列面板，每个面板都可以独立调整大小和位置。GoldenLayout还提供了丰富的API来监听布局变化和执行自定义逻辑。
- GridsterJS：GridsterJS是一个轻量级的网格布局库，它允许你动态地创建和管理网格中的小部件（widgets）。虽然它主要用于创建小部件布局，但也可以通过一些自定义来实现类似VSCode的面板拖拽调整大小功能。
4. 自定义实现
如果你需要更高的自定义程度或者以上库不满足你的特定需求，你也可以选择自己实现类似的布局系统。这通常涉及到监听鼠标事件（如mousedown、mousemove和mouseup）来计算和调整面板的大小和位置。此外，你还需要处理CSS样式以确保布局在视觉上符合预期。
结论
对于前端开发中需要实现类似VSCode面板拖拽调整宽高的功能，你可以选择使用现有的库（如vue-split-pane、react-split-pane、GoldenLayout或GridsterJS）来简化开发过程，或者根据自己的需求自定义实现。选择哪种方案取决于你的项目需求、技术栈以及你希望达到的自定义程度。
-
当日程调整（resize）结束并且日程被改变时触发： function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){} event 是 Event Object 对象，包含当前日程的信息（时间，标题等） dayDelta 是日程移动的天数（可能是负数） minuteDelta 是日程移动的分钟数（可能是负数），只有在议程
-
当日程调整（resize）结束的时候触发： function( event, jsEvent, ui, view ) { } 用户调整日程之后肯定会触发此回调函数，即使日程没有发生变化。eventResizeStop 在日程信息修改之前触发，并且早于 eventResize 回调。 event 是 Event Object 对象，包含当前日程的信息（时间，标题等） jsEvent 是原生的js对象
-
当日程调整（resize）开始时触发： function( event, jsEvent, ui, view ) { } event 是 Event Object 对象，包含当前日程的信息（时间，标题等） jsEvent 是原生的js对象，包含鼠标点击坐标等信息。 ui 是 jQuery UI 对象。 view 是当前的 View Object。 官方英文文档：http://arshaw.com/
-
当拖动结束且日程移动另一个时间时触发： function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view){} event 是 Event Object 对象，包含当前日程的信息（时间，标题等） dayDelta 是日程移动的天数（可能是负数） minuteDelta 是日程移动的分钟数（可能是负数），只有在议
-
当日程拖拽结束的时候触发： function( event, jsEvent, ui, view ) { } 此回调函数肯定会被触发，即使日程时间没有变化。eventDragStop 会在日程的信息修改之前被触发，并且比 eventDrop 回调要早。 event 是 Event Object 对象，包含当前日程的信息（时间，标题等） jsEvent 是原生的js对象，包含鼠标点击坐标等信息。 u
-
当日程开始拖拽的时候触发eventDragStart回调： function( event, jsEvent, ui, view ) { } event 是 Event Object 对象，包含当前日程的信息（时间，标题等） jsEvent 是原生的js对象，包含鼠标点击坐标等信息。 ui 是 jQuery UI 对象。 view 是当前的 View Object。 官方英文文档：http://a
-
设置日程被拖拽的时候的透明度，值为浮点类型或者 View Option Hash，默认为： { // for agendaWeek and agendaDay agenda: .5, // for all other views '': 1.0 } 浮点类型范围从0.0-1.0 官方英文文档：http://arshaw.com/fullcalendar/docs/
-
dragRevertDuration 用来定义，当拖拽失败后，日程回到原始位置的时间。值为整数类型，默认500。单位是毫秒（1秒 = 1000毫秒） 官方英文文档：http://arshaw.com/fullcalendar/docs/event_ui/dragRevertDuration/