jQuery UI draggable ander element mee slepen

[GWTommy]

Kort uitleg, ik heb een soort window systeempje, ik heb dat zo opgebouwd: (divs)
+ Hoofd div
++ Schaduw van windows
+++ Schaduw window 1
+++ Schaduw window 2
++ Window 1
++ Window 2

Nu zijn de windows draggable, dmv jQuery UI. Nou wil ik dat als een venster versleept wordt, de schaduw die met position: absolute er precies achter hangt, synchroom mee sleept. Dus dat het er eigenlijk achter zit. Is hier een manier voor?

Dit is mijn draggable:

code:

    $("div.window").draggable({
                            scroll: false,
                            scrollSensitivity: 2,
                            handle: '.h1',
                            stack: { group: 'windows', min: 50 },
                            start: function (event, ui) { $(this).css("z-index", lastZIndex + 1); lastZIndex = lastZIndex + 1; },
                            stop: function (event, ui) {
                                                        $(this).attr("background", "#A5A7A6");
                                                        $("div#shadows").remove();
                                                        themeWindows();
                                                    }
                    }).mousedown(function (){
                                                $(this).removeClass("outfocus").css("z-index", lastZIndex + 1);
                                                lastZIndex = lastZIndex + 1;
                                                $("div.window").not(this).addClass("outfocus");
                                                $("div#shadows").remove();
                                                themeWindows();
                                            });

Alvast bedankt!

[Bosmonster]

Makkelijkste lijkt me je opbouw aanpassen en je shadows gewoon in je window-element stoppen ipv 1 globaal shadow-element... (wat is uberhaupt de reden dat je dit zo hebt opgelost?)

[ Voor 18% gewijzigd door Bosmonster op 31-07-2009 09:50 ]

[GWTommy]

Ja ik weet dat het zo er niet erg slim uit ziet, maar het is verschikkelijk ingewikkeld. Ik ga eens kijken of ik het om kan gooien en toch gewoon de shadows in het element zelf kan stoppen.. Ik denk ook dat er geen andere oplossing is. Toch bedankt!

[Bosmonster]

Eenvoudigere oplossing is de shadow gewoon even uit te zetten tijdens het draggen natuurlijk

Je zult ook vast wel het andere element mee kunnen verplaatsen op basis van de positie van je huidige drag-element. Hiervoor kun je het 'drag'-event gebruiken en ui.position. Dat staat overigens ook allemaal in de documentatie

Probeer het aantal lookups in dit soort situaties te beperken en cache deze in een variabele, aangezien dat drag-event waarschijnlijk vele malen per seconde afgevuurd zal worden. Anders zou het wel eens kunnen gaan horten en stoten.

[ Voor 81% gewijzigd door Bosmonster op 31-07-2009 11:22 ]

[GWTommy]

Dat had ik ook al geprobeerd, maar toch niet het effect wat ik wil bereiken. Ik denk dat dit nou gaat lukken, maar je hoort het nog als ik met iets zit.

Edit: heb het omgegooid, werkt nu. Alleen omdat de pagina heel veel elementen bevat, waaronder wat HTML 5 canvas elementen, gaat het draggen niet echt smooth. Is hier een oplossing voor? Die shadow is 20 elementen extra per window.

[ Voor 43% gewijzigd door GWTommy op 31-07-2009 11:33 ]

[Bosmonster]

Betwijfel of je daar veel kunt optimaliseren, zal voornamelijk van de snelheid van je computer en de browser afhangen hoe de grafische performance uiteindelijk is.

Het enige dat je kunt doen is je code even goed doorlopen om te kijken of er qua loops en lookups dingen te verbeteren zijn.

[ Voor 28% gewijzigd door Bosmonster op 31-07-2009 11:54 ]

[GWTommy]

Voor ieder venster zit er een loop in die twintig elementen toevoegt, maar dat is echt nodig.. Verder kan er nog niets korter of beter omdat de code nog geen 100 lijnen is op dit moment, ik zit nog in het begin stadium van het hele project.