Problema di isotopo con la finestra di dialogo jQuery

Question

È un po 'difficile spiegare il problema ma cercherò di utilizzare le immagini.

Demo: http://jsfiddle.net/H8Qbn/13/

cerco di organizzare automaticamente le finestre di dialogo jQuery utilizzando Isotope.

• La prima immagine mostra che tutto funziona perfettamente.

• La seconda foto mostra ciò che accade quando si cerca di ridimensionare la finestra di dialogo prima di jQuery. Si sta ridimensionando bene e tutte le altre finestre di dialogo sono organizzate automaticamente.

• Quando provo per organizzare la seconda finestra Prima si sposta secondo la posizione (in alto, a sinistra) e quindi ridimensiona e tutti gli altri dialoghi non sono disposti automaticamente.

• La terza finestra si comporta esattamente come 2. Esso si muove secondo la posizione (in alto, a sinistra) e non è disposto automaticamente.

Qualche suggerimento?

Answer 1

L'isotopo non è progettato per finestre di dialogo trascinabili; vedere what the plugin author says per quanto riguarda questo tipo di funzionalità.

EDITFiddled around with a few more things e ha ottenuto il layout per riorganizzare quando una finestra di dialogo viene chiusa con .remove(); tuttavia, il trascinamento non è supportato (vedi sopra) e il ridimensionamento manuale non funzionerà. Perché hai bisogno del ridimensionamento manuale delle finestre di dialogo? Non può essere fatto a livello di programmazione?

Answer 2

Il plug-in muratura jquery può calcolare la nuova posizione quando la si chiama con la funzione di muratura ("ricarica") sul contenitore circostante dopo aver ridimensionato le finestre di dialogo o aggiunto o rimosso elementi. L'ho usato nel mio Javascript quando aggiungo o rimuovo un'immagine al mio contenitore circostante. Puoi vedere il plug-in di Massoneria che funziona dal vivo nella mia homepage all'indirizzo web http://www.chihoang.de.

Questo è il mio anteporre e aggiungere la funzione con muratura ("ricarica") alla fine:

  if (ele.Additem == "Append") { 
      container.append($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } else if (ele.Additem == "Prepend") { 
      container.prepend($j("#brickTemplate").tmpl(ele).css({ 
      "display": "block" 
      })).masonry('reload'); 
     } 

E questa è la mia funzione di rimozione:

 $j('.brick').remove(":contains('" + ele.Headline + "')"); 
     container.masonry('reload');