Jak wykonać panele dokowania metodą "przeciągnij i upuść"?

Question

Chciałbym mieć dokowalne panele za pomocą jquery, które zachowują się jak te w Visual Studio. Przede wszystkim chcę mieć możliwość przeciągania i upuszczania paneli po dowolnej stronie ekranu. Karty, ruchome okna i automatyczne ukrywanie paneli nie są konieczne. Kiedy dwa lub więcej paneli zostanie porzuconych na tej samej stronie, powinny one dzielić przestrzeń po tej stronie ekranu. Użytkownik powinien mieć możliwość zmiany rozmiaru paneli.

Czy istnieje wtyczka jQuery i/lub jQuery UI, która może to zrobić? A może samouczek?

Answer 1

Możesz użyć interfejsu Jquery do wykonania tego wszystkiego.

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

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

Poniżej znajduje się przykład przeciągnij i upuść stronę zrobiłem.

Answer 2

Użyłem jQuery UI układ, który zapewnia wszystkie funkcje z wyjątkiem Przeciągnij i od tego jedzie na wierzchu jQuery możemy użyć jQuery UI przeciągnij-upuść, ile potrzeba.

jQuery UI Layout

Niedawno dowiedziałem się tę nową kontrolę, która jest dokładnie to, co trzeba.

http://www.dockspawn.com/#

Kolejny menedżer układ warto przyjrzeć

https://github.com/WebCabin/wcDocker

używamy to jeden z naszych projektów, a to jest bardzo pomocne.

Niedawno znalazłem lobiPanel i użyłem tego do stworzenia fantastycznie wyglądającego portalu. Uwielbiam to.

Answer 3

Jeśli nie są ograniczone do jQuery, tutaj jest imponująca kierownik dokująca, która pozwala na korzystanie z wielu okien: http://golden-layout.com/examples/ (spróbuj „Otwórz w nowym oknie” przyciski)

Na stronie FAQ nie ma lista alternatywnych menedżerów układów: http://golden-layout.com/faq/