Как сделать стыковочные панели с перетаскиванием?

Я хотел бы иметь прикрепляемые панели, используя jquery, которые ведут себя так же, как в Visual Studio. В основном, я просто хочу иметь возможность перетаскивать панели на любую сторону экрана. Вкладки, плавающие окна и панели автоматического скрытия не нужны. Когда две или более панели отбрасываются на одну сторону, они должны разделять пространство на этой стороне экрана. Пользователь должен иметь возможность изменять размеры панелей.

Есть ли плагин jQuery и/или jQuery UI, который может это сделать? Или, может быть, учебник?

Ответ 1

Вы можете использовать JQuery UI для выполнения всего этого.

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

Ниже приведен пример страницы перетаскивания, которую я сделал.

Ответ 2

Я использовал макет jQuery UI Layout, который предоставляет все функции, кроме перетаскивания, и поскольку это выполняется поверх jQuery, мы можем использовать перетаскивание jQuery UI по мере необходимости.

jQuery UI Layout

Недавно я узнал об этом новом контроле, который точно нуждается.

http://www.dockspawn.com/#

Другой менеджер компоновки стоит посмотреть

https://github.com/WebCabin/wcDocker

мы используем этот один из наших проектов, и это очень полезно.

В последнее время я нашел lobiPanel, и я использовал это для создания фантастически выглядящего портала. Я люблю его.

Ответ 3

Если вы не ограничены jquery, вот впечатляющий менеджер стыковки, который позволяет использовать несколько окон: http://golden-layout.com/examples/ (Попробуйте кнопки "Открыть в новом окне" )

На странице часто задаваемых вопросов есть список альтернативных менеджеров макетов: http://golden-layout.com/faq/