Witam. Mam problem nad którym siedzę już tydzień i dalej nie wpadłem na rozwiązanie. Mianowicie chodzi o to, że mamy w HTML coś takiego :
<div class = "mainContainer">
<div class="box kategoria1"></div>
<div class="box kategoria2"></div>
<div class="box kategoria1"></div>
<div class="box kategoria3"></div>
<div class="box kategoria2"></div>
<div class="box kategoria1"></div>
<div class="box kategoria3"></div>
<div class="box kategoria3"></div>
<div class="box kategoria1"></div>
<div class="box kategoria1"></div>
</div>
są jeszcze przyciski "kategoria1" kategoria2, kategoria3.
Mam zrobiony skrypt, który po kliknięciu w odpowiedni przycisk, wyszukuje obiekt posiadający daną klasę, sprawdza jego pozycje, w przypadku gdy nie znajduje on się na pierwszym miejscu , sprawdzana jest pozycja obiektu będącego na pierwszym miejscu, po czym w ładnej animacji obiekty zamieniają się miejscami. I to po części działa w momencie gdy obiekty są obok siebie, np 1,3,2, - wtedy np 2 zamieni się z 1 bo w dom ułożone są tak samo. Jednak przy np. 3'ciej iteracji obiekty graficznie układają się inaczej niż są pozycjonowane w DOM i robi się problem. Celem tego jest posortowanie obiektów tak by zarówno w DOM jak i graficznie były ułożone obok siebie obiekty o wybranej klasie np 222 -> ułożenie reszty nie ma znaczenia bo i tak znikną.
Rozwiązanie widzę takie (teoria):
for(let i = 0, i < iloscBox, i++){
znalezienie pozycji elementu pasującego oraz nie pasującego i zamiana ich podmieniając im top oraz left.
jednocześnie taka sama zamiana miała by się wykonać w DOM. (tu mam problem)
i kod leci sobie dalej.
}
Ktoś ma jakąś koncepcję jak wykonać zamianę miejscami obiektów w drzewku DOM? wołałbym uniknąć klonowania bo nie wiadomo dokońca ile obiektów będzie.
całość piszę w JQuery - jakby ktoś był łaskaw pomóc.
Mam nadzieję że dobrze wyjaśniłem o co mi chodzi.
z góry dziękuję za odpowiedź