Come realizzare i pannelli di aggancio drag-and-drop?

Question

Vorrei disporre di pannelli ancorabili usando jquery che si comportano in modo simile a quelli di Visual Studio. Principalmente, voglio solo essere in grado di trascinare e rilasciare i pannelli su qualsiasi lato dello schermo. Le schede, le finestre mobili e i pannelli per nascondere automaticamente non sono necessari. Quando due o più pannelli vengono lasciati sullo stesso lato, devono condividere lo spazio su quel lato dello schermo. L'utente dovrebbe essere in grado di ridimensionare i pannelli.

C'è un plug-in jQuery e/o jQuery UI che può fare questo? O forse un tutorial?

Answer 1

È possibile utilizzare l'interfaccia utente di Jquery per eseguire tutto ciò.

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

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

Di seguito è un esempio di un drag and drop pagina ho fatto.

Answer 2

Ho usato l'interfaccia utente layout jQuery che fornisce tutte le funzionalità tranne il drag-drop e poiché questo cavalca sulla parte superiore del jQuery possiamo usare jQuery UI trascinamento in base alle esigenze.

jQuery UI Layout

ho scoperto da poco questo nuovo controllo, che è quello che hanno bisogno esattamente.

http://www.dockspawn.com/#

Un altro gestore di layout la pena di guardare

https://github.com/WebCabin/wcDocker

stiamo usando questo uno dei nostri progetti ed è molto utile.

Più recentemente ho trovato lobiPanel e l'ho usato per creare un portale dall'aspetto fantastico. Mi piace.

Answer 3

Se non si è limitato a jQuery, qui è un impressionante attracco manager che permette di utilizzare più finestre: http://golden-layout.com/examples/ (da provare la "Apri in una nuova finestra" pulsanti)

Nella pagina FAQ c'è un elenco di gestori di layout alternativi: http://golden-layout.com/faq/