Odredjivanje pozicije div-a

[mslavko]

Imam tabelu http://jsfiddle.net/6QhuF/ i divovi su razbacani na sve strane i sad mi je potrebno da znam na osnovu njihove top i left poziije ko je na kom mestu u toj tabeli.

Preko DOM analize se ne moze doci do pozicija zato moram da koristim top i left pa me zanima postoji li neka matematicka formula kojom bi to odredio.

Znaci imam .draggable divove sa razlicitim top i left vrednstima i moram da znam ko je na najvisoj poziciji a ko najnize u tabeli.


(ja sam pokusao u pocetku da mnozim top*left i da ondak pravim redosled ali je to glupo i netacno naravno)

[mslavko]

Pojednostavljeno:

Formula za sortiranje ovih tacaka:

[ivanhoe]

ako pozicije u tabeli definises po redosledu kao u html source-u, onda treba prvo sortirati po floor(Y / visina_reda_tabele), pa onda tacke unutar svakog reda po X.

[mslavko]

Pa da upravu si, hvala

tableHeight/tableRows pa se onda dobijaju skupovi tacaka a koje se dalje lako sortiraju po x osi...

[mslavko]

Da ne tvaram novu temu nadovezacu se na ovo, Ja sam pokusao problem da resim ovako:

var arrayOfDivs = [];

//izdvajam sve divove iz tabele i njihove pozicije top i left

$("#table .draggable").each(function(index, item){
   var lat = $(item).attr("lat");
   var lng = $(item).attr("lng");
   var top = $(this).position().top;
   var left = $(this).position().left;
   arrayOfDivs.push({topPosition : top, leftPosition: left, lat : lat, lng : lng});
});

//kreiram osnovne varijable potrebne za funciju koja sledi
var height = $('table').height();
var rowsCount = $('table tr').length;
var ROW_HEIGHT = height/rowsCount;

var rows = [];

//racuna se u kom redu se nalazi koji div i dodaje se u novi array

for(var i = 0; i < rowsCount; i++) {
    rows[i] = [];
}

for(var i = 0; i < arrayOfDivs.length; i++) {
   var position = arrayOfDivs[i];
   var rowNumber = Math.floor(position.topPosition / ROW_HEIGHT);
//PROBLEM SE JAVLJA OVDE
   rows[rowNumber].push(position);
}
for(var i = 0; i < rowsCount; i++) {
    rows[i].sort(function(a, b) {
        return a.leftPosition - b.leftPosition;
    });
}
console.log(JSON.stringify(rows, null, 3));

medjutim moze li neko da mi pomogne i kaze kako da resim probem koji se javlja a to je: u Consoli pise

" Uncaught TypeError: Cannot call method 'push' of undefined"

Kod: http://jsfiddle.net/u58k6/10/

[Br@nkoR]

Problem je u tome što je pozicija nekih .draggable elemenata negativna, odnosno zato što se elementi nalaze izvan .ui-droppable elementa.

Sa kodom:

var rows = [];
for(var i = 0; i < rowsCount; i++) {
    rows[i] = [];
}

kreiraš prazan dvodomenzionalni niz, pri čemu je i od 0 do 6, zatim pomoću koda:

for(var i = 0; i < arrayOfDivs.length; i++) {
   var position = arrayOfDivs[i];
   var rowNumber = Math.floor(position.topPosition / ROW_HEIGHT);

   rows[rowNumber].push(position);
}

"puniš" gornji rows niz podacima, ali pošto je top pozicija nekih elemenata negativna, tako je i rowNumber negativan, pa je rows[rowNumber] nedefinisan, i onda u nedefinisan niz pokušavaš da ubaciš novi član.
Možeš na primer da umesto što .draggable elemente sortiraš u odnosu na top-left poziciju, sortiraš ih u odnosu centar elementa (vertikalna i horizontalna sredina) ili videti zašto .draggable elementi izlaze izvan .ui-droppable elementata ili je to normalno ponašanje.

[mslavko]

Hvala na objasnjenju ali dodao sam:

var top = $(this).position().top + 200;


kako top pozicija nikad ne bila negativna, ali open isto.


U ovom primeru nema negativnih pozicija: http://jsfiddle.net/u58k6/16/embedded/result/

ali opet consola prikazuje:

rows[rowNumber].push(position);
Uncaught TypeError: Cannot call method 'push' of undefined

[Br@nkoR]

Uzmimo npr. poslednji .draggable elemenat, čija je top pozicija 361px, pa tada imamo:

var rowNumber = Math.floor(position.topPosition / ROW_HEIGHT);

odnosno:

var rowNumber = Math.floor((361 + 200) / 60.7);

dobijamo da je:

var rowNumber = 9

Kao što sam u prethodnoj poruci naveo, kod rows[i] i ide od 0 do 6, pa takođe pokušavaš:

undefined.push(position)

[mslavko]

Nasao sam resenje Kod mene funcionise:

if(rowNumber<0){ rowNumber = 0; }

[Br@nkoR]

Drago mi je da si našao rešenje, mada kada u gornje navedeni kod dodam ovo rešenje, kao izlaz dobijam:

[
   [
      {
         "topPosition": -3,
         "leftPosition": 54
      },
      {
         "topPosition": 57,
         "leftPosition": 197
      },
      {
         "topPosition": -3,
         "leftPosition": 245
      },
      {
         "topPosition": 57,
         "leftPosition": 330
      }
   ],
   [],
   [
      {
         "topPosition": 178,
         "leftPosition": 147
      },
      {
         "topPosition": 178,
         "leftPosition": 286.46875
      },
      {
         "topPosition": 178,
         "leftPosition": 454
      }
   ],
   [],
   [
      {
         "topPosition": 302,
         "leftPosition": 373.46875
      }
   ],
   [
      {
         "topPosition": 361,
         "leftPosition": 480
      }
   ],
   []
]

gde se vidi npr. da dan 1 ima 4 elementa ili treba da ima 2, a npr i raspored je malo problematičan 132456789, ili ja nisam nešto dobro razumeo.