JQUERY> div-finestre volanti, interattive, spostabili, animate !?

[Nokao]

Ciao a tutti. Preciso che ho titolato "jquery" perchè uso WordPress e jquery è già allegato/incluso, ma sono disposto ad usare qualsiasi cosa (es. mootools).

Ho già trovato A QUESTO INDIRIZZO il codice per rendere una "window" div:

• apribile-chiudibile (tasto X e tasto "riduci a icona")
• trascinabile (spostabile)
• eventualmente so come muoverla sugli assi x-y con degli eventi

Il mio problema è che devo lavorare sull'interazione, e vi chiedo un aiuto.

il mio obiettivo è creare una grande pagina nera, in cui alcune finestre (posizionate a caso e con contenuto più o meno random preso dal database) si spostano per occupare lo spazio.

Questo perchè il loro posizionamento casuale potrebbe sovrapporle, quindi devo inventarmi una "gestione delle collisioni" e dello spazio geografico.

Qualcuno di voi ha dei link da suggerirmi per studiare la cosa, oppure dei consigli su cosa cominciare ?

p.s. il codice attuale è qui: http://www.nokao.com/post-1/
si vedono la finestra centrale (fissa) e le 5 finestre volanti che vorrei rendere più interattive

[simo88fano]

Hai chiaro il drag and drop con html 5 ?

[Nokao]

Per il momento faccio tutto quello di cui ho bisogno grazie a questo: http://demos.kendoui.com/web/window/index.html

Mi mancherebbe solo il fatto di far "scontrare" le finestre con le collisioni, per le quali ho trovato questo codice: http://eruciform.com/jquidragcollide/

Purtroppo non ho le competenze per mettere il tutto insieme.

[simo88fano]

Ecco io i cms non li uso,anzi non mi è mai capitato,dato che creo servizi web da 0,quindi non saprei cosa indicarti per quanto riguarda ad Wordpress,Partendo da 0 procederei come segue:

1.definizione dei div per il contenuto,
---a questo punto uso javascript(jquery)------
2.caricare il contenuto nei div e salvare le grandezze widht e height di ogni div in un array
3.rendere i div draggable(oovero spostabili)
2.creare una funzione random per tutti i div creati e dal secondo div controllare che la posizione facendo riferimento alla grandenzza dei precdenti div non occupi l'area dei div precedenti,per esempio ho un quadrato 100x100 il primo div occupo 20x30,quindi l'area disponibile x il secondo div sara 80x70 ma bisogna tenere conto delle posizioni e della grandezza del div,quindi le considerazioni iniziali sono molteplici

a. i div devono occupare solo la finestra o possono espandersi(all'infinito)
B. IL CONTENITORE iniziale quanto grande deve esssere se deve occupare un area precisa.
c.la funzione random deve posizionare casualmente i div o con un certo criterio,magari l'asse y è definito da un espressione?

insomma c'è un lavoretto non indifferente

[simo88fano]

partendo da questo script jquery potresti iniziare un ragionamento

$('div.box').each(function() {

var width = 500;
var height = 500;
var $div = $(this);

$div.css({
top: Math.floor((Math.random() * height) + 1),
left: Math.floor((Math.random() * width) + 1)
});

});​