Divs drag and drop, verwisselen en auto resize

[Peunage]

Ik zit met het volgende probleem. Ik wil een webpagina maken met meerdere divs. Het idee is dat een gebruiker zelf bepaalt hoe de divs precies staan. Dat betekent dat hij de divs kan omwisselen van plaats. De meeste divs hebben dezelfde grote, maar er komt ook 1 div met een andere grootte. Wanneer deze gewisseld wordt met een kleinere div moet deze auto resizen.

Ter illustratie


Nou is mijn vraag, moet dit met jquery? Ik weet dat het verhaal met snappable divs met jquery kan, maar ik heb nog niet echt een voorbeeld gevonden van wat ik hier boven beschrijf. Is dit überhaupt mogelijk? Zo ja, heeft iemand dit al ergens anders gezien?

[Johnny]

Het kan (maar hoeft niet) met jQuery, het makkelijkst is dan om de Sortable-plugin van jQuery UI te gebruiken.

http://jqueryui.com/sortable/#display-grid

Om de laatste <div> groter te maken moet je wel zelf wat programmeren. Ik zou zelf denken aan een event dat wordt getriggered na het sorten waarbij je kijkt welke <div> de laatste is en daar dan de dimensies van aanpast.

[NiteSpeed]

Of iets doen met CSS3 en een last-child selector. Transform en eventueel transition toepassen, klaar

[ Voor 12% gewijzigd door NiteSpeed op 29-03-2013 20:50 ]

[Nedra]

Google eens op 'jQuery drag drop sort' en je komt genoeg mooie dingen tegen. Zelf ben ik nogal gecharmeerd van deze lightweight jquery/html5 oplossing: http://farhadi.ir/projects/html5sortable/ (nog niet getest, maar het verhaal er achter klinkt erg logisch).

[Peunage]

Dat ziet er inderdaad heel tof uit. Het blijkt niet eens zo heel moeilijk te zijn met jquery;
http://jsfiddle.net/Peunage/W9Vjw/2/