2011-01-24 16 views
6

Sto provando a creare una pagina basata su portlet in cui i portlet hanno dimensioni diverse.UI Jquery, "area morta" con portlet ordinabili

Il problema è di aggirare la "zona morta" a sinistra del "2.2 portlet", un "portlet 1.1" o un "portlet 2.1" si inseriscono nello spazio, ma è possibile complice e come ?

La larghezza della pagina è fisso e dovrebbe rimanere così, http://www.jsfiddle.net/XF2pV/

Sono aperto a suggerimenti su altri framework jQuery UI, se non è in grado complice questo.

risposta

1

Sfortunatamente il metodo è difettoso. L'utilizzo di jquery ordinabile con un layout di griglia di elementi di dimensioni diverse comporterà questo comportamento. Il motivo è che in html e css, si sta creando un elenco di elementi flottanti a sinistra, che, se consentito da un contenitore a larghezza fissa, lasciano degli spazi che sono effettivamente inutilizzabili.

Il fatto che la larghezza del contenitore sia fissa e che le dimensioni delle scatole siano fisse significa che sarebbe facile provare un altro modo per posizionarle. Prova a utilizzare il posizionamento assoluto usando solo css e html per riempire tutti gli spazi esattamente come li desideri inizialmente, quindi sperimenta con il javascript per spostare le caselle.

Tuttavia, dubito che la libreria jQuery "ordinabile" funzioni quando si utilizza il posizionamento assoluto (devo ammettere che non l'ho mai usato) Con il posizionamento assoluto, è probabile che gli elementi vengano "spostati" quando trascini qualcosa su di loro sarà problematico. Potrebbe essere necessario definire un insieme di div nascoste che fungono da "griglia" - o luoghi in cui è possibile rilasciare oggetti e un altro set di div che contengono le cose visibili che si desidera spostare. L'api draggable e dropable di jQuery ti sarà d'aiuto, ma dovrai eseguire molte più operazioni di codifica per garantire che gli elementi in cui ti sposti si "incastrino" in posizione, spostando gli altri fuori mano quando li lasci cadere.

Questo aspetto è relativo a https://stackoverflow.com/questions/2133677/jquery-sortable-divs-replicate-bbc-home-page forse è possibile controllare il codice sorgente della home page della BBC. http://bbc.co.uk

+0

Grazie Greg, larghezza di colonna fissa non è un'opzione per il mio cliente. Ho già esaminato le soluzioni della BBC, sfortunatamente sembra che la BBC abbia rimosso la sua funzionalità drag'n'drop basata su colonne? – anderssonola

+2

La soluzione su Citifirst, funziona perfettamente come suggerisce @ Gregg-Woods ... [se.citifirst.com] (https://se.citifirst.com/SV/Showpage.aspx) – anderssonola

0

Mi sono imbattuto in questa domanda cercando di risolvere il problema per me stesso.

Sono sulla prima iterazione a provare una soluzione: utilizzare il contenitore padre come un droppable.

Vedi https://stackoverflow.com/a/11352922/704827

0

C'è un plugin, ShapeShift che fa il lavoro bene

+0

Grazie per la risposta rapida, 4 anni dopo :-) Hoever lo Shapeshift genera anche spazi morti ed è difficile tenere traccia dell'ordine degli articoli – anderssonola

+0

È solo che ho lo stesso problema e sto provando tutte le librerie senza successo :(Che cosa si è rivelato essere una soluzione per te? – christina

+0

Abbiamo scritto la nostra libreria per risolvere il problema: si trattava di una soluzione più "snap-to-grid". – anderssonola

Problemi correlati