[Javascript] Przesuwanie (drag and drop) i ładowanie nowych divów, jak zrobić takie coś jak na mapkach (np tych od googla) Opcje

[fragles]

jestem początkującym w temacie i na razie wymyślam sobie co by zrobić co gdzieś na jakiejś stronie zauważę, aby mniej więcej miec pojęcie jak to działa - o ile samo drag and drop opanowałem, jest na to wiele przykładów to mam problemy z czymś takim jak zrobienie przesuwanego diva wraz z ładowaniem elementów. Coś takiego jak jest w każdej mapce - niestety za mało wiem, żebym sobie sam poradził, dlatego też pytam się jak takie coś można zrobić.
Przyjmując, że dany element ma rozmiar stały to musi być jakaś manipulacja jego własciwością top i left, dodatkowo trzeba by sprawdzać czy elementy można dodawać, czy jeszcze nie (i jak to lepiej zrobić dodawać wierszami czy kolumnami, tak żeby jakiś element narożny niepotrzebnie dwa razy się nie dodał). Czy elementy, które są jakby za bardzo przesunięte są usuwane, czy zostają. Chodzi mi o to, że jak przesuwam diva to przy przesunięciu go w miejsce, w którym widać granicę, ramkę i nalezy doładować brakujący fragment, a dokładnie naprzeciwko czyli z drugiej strony są elementy, które jakby wyszły poza pierwotny rozmiar,czy się je usuwa, czy zachowuje? Czyli czy dany div ma zawsze tyle samo elementów (kafelków) czy są one cały czas dodawane?
Jak poznać czy do elementy mozna juz dodawać, jest jakaś własność, która jest widoczną wyskością lub szerokością diva znajdującego się w divie mającym oferflow:hidden?

Próbuję różnych kombinacji, ale nie wiem za bardzo jak sie do tego zabrać, może ktoś wie gdzie jest taki przykład, a może to, czego szukam ma swoją nazwę i po niej mogę coś znaleźć w wyszukiwarce, chodzi mi o poradę, jak to się robi?

ps mam nadzieję, że w miare jasno opisałem o co chodzi

udało mi się coś napisać - działa, ale mam pytanie, czy można to zrobić lepiej, wydajniej, efektywniej?

na razie uzupełnia się na puszczenie myszki, wykorzytsałem do tego jquery
załozenia są takie
- przesuwany div po puszczeniu myszki ma top i left równe 0
- wewnętrze divy, obrazki mają się przystosować
- elementów wewnętrzych ma być zawsze tyle samo (czyli dodawanie wiąże się z usuwaniem)
- elementy(kafelki) są kwadratowe (dla ułatwienia)

zrobiłem klasę w JS, mniej więcej postaram się ją opisać

na początek zmienne

[PHP] pobierz, plaintext 
<?php
var movTest =
{
tiledS:256,//rozmiar boku kwadratu stanowiącego element wewnętrzny
cWidth:0,//szerokość kontenera, czyli diva, który ma overflow:hidden
cHeight:0,//wysokość kontenera
mWidth:0,//szerokość diva z elementami (tego co jest w divie - kontenerze
mHeight:0,//wyskość diva z elementemi
points:{minX:0,maxX:0,minY:0,maxY:0},//punkty - określają współżędne X i Y lewego g órnego i prawego dolnego rogu
border:{top:0,left:0,bottom:0,right:0},//ramka - zmienne służace do przechowywania wartości \"ile zostało\" aby wiedzieć kiedy załadować elementy, czyli przechowanie ilości px \"schowanych\" z każdej strony w div:overflow
lastPos:{top:0,left:0},//zmienne przechowujący ostanią wartość top i last diva przesuwanego
imgPos:{posT:Array(),posL:Array()},tablica do przechowywania wartości top i left elementów przesuwanych
?>
[PHP] pobierz, plaintext 

funkcj inicjująca - czyli pierwsze załadowanie diva

[PHP] pobierz, plaintext 
<?php
loadMov:function(x,y)//argumenty to x i y (lewy górny róg) kostki która ma być na środku - jeszcze nie ma centrowania, żeby to się dopasowywało do środka tej kostki, ale pewnie zrobię
    {
        this.cWidth=$(&#092;"#containerDiv\").width();//pobranie szerokościo kontenera
        this.cHeight=$(&#092;"#containerDiv\").height();//pobranie wysokości kontenera
        var elW = Math.ceil(this.cWidth/this.tiledS);//obliczenie ile elementów zmiesci się na szeokość
        var elH = Math.ceil(this.cHeight/this.tiledS);//obliczenie ile elementów zmiesci się na wysokość
        var bX = x - Math.floor(elW/2)-1;//wyznaczenie współżędnej X lewego górnego rogu (1 kafelek w zapasie - czyli niewidoczny)
        var bY = y - Math.floor(elH/2)-1;//wyznaczenie współżędnej Y lewego górnego rogu (1 kafelek w zapasie - czyli niewidoczny)
        var eX = x + Math.ceil(elW/2)+1;//wyznaczenie współżędnej X prawego dolnego rogu (1 kafelek w zapasie - czyli niewidoczny)
        var eY = y + Math.ceil(elH/2)+1;//wyznaczenie współżędnej Y prawego dolnego rogu (1 kafelek w zapasie - czyli niewidoczny)
        this.mWidth = (elW+2)*this.tiledS;//obliczenie szerokości diva przesuwanego
        this.mHeight = (elH+2)*this.tiledS;//obliczenie wysokosci diva przesuwanego
       
        //wyznaczenie bieżących współżędnych lewego górnego i prawego dolnego rogu
        this.points.minX = bX; this.points.maxX = eX-1;
        this.points.minY = bY; this.points.maxY = eY-1;
      
        this.completeDiv(bY,eY,bX,eX,0,0,0);//wywołanie funkcji uzupełniającej DIV - 1,3 argumeny - lewy górny róg, 2,4 - prawy dolny róg, 5 - przesunięcie X(czyli o jaką wartość w poziomie ma być przsunięty element aby \"pasował\" do istniejących, 6 - przesunięcie Y (w pionie), 7 - punk startu X, aby nie ładować podwójnie przy konieczności uzupelnia X-ów i Y-ów, X zostawiam jako ładowany względem Y
       
        this.border.top = parseInt($(&#092;"#movingDiv\").css(\"margin-top\"));// -ustalenie wartości zakrytej od góry
        this.border.left = parseInt($(&#092;"#movingDiv\").css(\"margin-left\"));// -ustalenie wartości zakrytej z lewej
       
        this.border.bottom = this.mHeight-(this.cHeight-this.border.top);// -ustalenie wartości zakrytej z dołu
        this.border.right = this.mWidth-(this.cWidth-this.border.left);// -ustalenie wartości zakrytej z prawej     
 
        this.initPosArr((this.points.maxY-this.points.maxY)+1,true);//załadowanie wartości top do tablicy
        this.initPosArr((this.points.maxX-this.points.minX)+1,false);//załadowanie wartości left
       
      
    },
?>
[PHP] pobierz, plaintext 

wywołanie funkcji wystepujące przy inicjalizacji

[PHP] pobierz, plaintext 
<?php
//funkcjz uzupełniającz DIV - 1,3 argumeny - lewy górny róg, 2,4 - prawy dolny róg, 5 - przesunięcie X(czyli o jaką wartość w poziomie ma być przsunięty element aby \"pasował\" do istniejących, 6 - przesunięcie Y (w pionie), 7 - punk startu X, aby nie ładować podwójnie przy konieczności uzupelnia X-ów i Y-ów, X zostawiam jako ładowany względem Y
completeDiv: function(saY,stY,saX,stX,mX,mY,sElX)
    {
        var elY=0; var elX = sElX;//kolejne kostki x i y
        for(var i = saY; i
        {
                for(var j = saX;  j
                {
 
                        $(&#092;"#movingDiv\").append($(\"<img>\").
                                                css(&#092;"position\",\"absolute\").
                                                css(&#092;"top\",(elY)*this.tiledS+mY).
                                                css(&#092;"left\",(elX)*this.tiledS+mX).//itd
                    );
                    elX++;
                }   
                elY++; elX=sElX;
        }
    },
?>
[PHP] pobierz, plaintext 

funkcja przy przesuwaniu diva

[PHP] pobierz, plaintext 
<?php
divMoving:function()
    {
        this.border.top=(parseInt($(&#092;"#mapaCtnDiv\").css(\"margin-top\"))+parseInt($(\"#mapaCtnDiv\").css(\"top\")))+this.lastPos.top;//ustalenie \"zakrtyej\" góry
        this.border.left=(parseInt($(&#092;"#mapaCtnDiv\").css(\"margin-left\"))+parseInt($(\"#mapaCtnDiv\").css(\"left\")))+this.lastPos.left;//ustalenie \"zakrytego\" dołu
        
        this.border.bottom = this.mHeight-(this.cHeight-this.border.top);//ustalenie \"zakrytej\" lewej
        this.border.right = this.mWidth-(this.cWidth-this.border.left);//ustalenie \"zakrytej\" prawej
    },
?>
[PHP] pobierz, plaintext 

1/3



2/3
sama główna funkcja modyfikująca kafelki

[PHP] pobierz, plaintext 
<?php
divStop:function()
    {
       this.divMoving();//uaktualnienie danych o pozycji granic z każdej ze stron
        var $this = this;
        var minT = 0; var minL = 0;//zmienne do prechowywania min wartości Top i Left kafelków
 
        $(&#092;"#movingDiv img\").each(
            function(i)
            {
                var loopT = parseInt($(this).css(&#092;"top\"))+parseInt($(\"#movingDiv\").css(\"top\"));//nowa wartość TOP kafelka
                var loopL = parseInt($(this).css(&#092;"left\"))+parseInt($(\"#movingDiv\").css(\"left\"));//nowa wartość left kafelka
                $(this).css(&#092;"top\",loopT);//ustawienie wasrtości top i left
                $(this).css(&#092;"left\",loopL);
                if(i==0)
                    {minT = loopT;minL = loopL;}    //inicjalizacja zmiennych przechowujących min
                else
                    {minT=(minT>loopT)?loopT:minT;
                     minL=(minL>loopL)?loopL:minL;}//szukanie wartości min dla Top i Left kafelków
            }
        );
      
        this.fillPosTab(minT,(this.points.maxY-this.points.minY)+1,true);//wpisanie do tablicy wartości TOP dla kafelków
        this.fillPosTab(minL,(this.points.maxX-this.points.minX)+1,false);//wpisanie do tablicy wartości LEFT dla kafelków
      
       $(&#092;"#movingDiv\").css(\"top\",0).css(\"left\",0);//przywrócenie divowi przesuwanemu wartości Top i Left = 0
      
        var modX = this.imgPos.posL[0];//podstawowy modyfikator x - pierwszy element tablicy
        var modY = this.imgPos.posT[0];//podstawowy modyfikator y - pierwszy element tablicy
 
    //ustalenie pozycji lewego górnego i prawego dolnego elementu przed zmianą
        var cMinX = this.points.minX;  var cMaxX = this.points.maxX+1;
        var cMinY = this.points.minY;  var cMaxY = this.points.maxY+1;
        var bModX = false;//czy była zmiana X-ow
        var bModY = false;//czy była zmiana Y-ów
        var yTiled=0;var xTiled=0;//ile wierszy i kolumn ma być zmodyfikowanych
 
    
    //modyfikacja  WIERSZy    
        if(this.border.top>0 || this.border.bottom<0)
        {
            yTiled = (this.border.top>0)?this.getElAm(this.border.top):this.getElAm(this.border.bottom);//ustalenie ilości wierszy które mają być dodane
           
            var bY = (yTiled>0)?this.points.minY-yTiled:this.points.maxY+1;//nowy lewy górny Y
            var eY = (yTiled>0)?this.points.minY:bY-yTiled;//nowy prawy dolny Y
           
            this.points.minY-=yTiled;//modyfikacja wartośi Y - lewa górna
            this.points.maxY-=yTiled;//modyfikacja wartośi Y - prawa dolna
            
            var limY=(yTiled>0)?this.imgPos.posT[this.imgPos.posT.length-yTiled-1]:this.imgPos.posT[Math.abs(yTiled)-1];// okreslenie limitu od którego kostki(kafelki) po Y mają być usunięte
           
            bModY = true;//ustawienie informacji, że była modyfikacja WIERSZY
           
            var modY_Y = (yTiled>0)?this.imgPos.posT[0]-(yTiled*this.tiledS):this.imgPos.posT[this.imgPos.posT.length-1]+this.tiledS;//modyfikator Y dla WIERSZY
            var modX_Y = this.imgPos.posL[0];//modyfikator X dla WIERSZY
           
            this.border.top -= yTiled*this.tiledS;//ustalenie nowej wartości \"zakrytej\" dla góry
            this.border.bottom -= yTiled*this.tiledS; //ustalenie nowej wartości \"zakrytej\" dla dołu
        }
 
 
    //modyfikacja  KOLUMN
        if(this.border.left>0 ||this.border.right<0 )
        {
            xTiled=(this.border.left>0)?this.getElAm(this.border.left):this.getElAm(this.border.right);//ustalenie ilości kolumn które mają być dodane
       
            var bX = (xTiled>0)?this.points.minX-xTiled:this.points.maxX+1;//nowy lewy górny X
            var eX = (xTiled>0)?this.points.minX:bX-xTiled;//nowy prawy dolny X
               
            this.points.minX-=xTiled;; //modyfikacja wartośi X - prawa dolna
            this.points.maxX-=xTiled; //modyfikacja wartośi X - prawa dolna
       
            var limX=(xTiled>0)?this.imgPos.posL[this.imgPos.posL.length-xTiled-1]:this.imgPos.posL[Math.abs(xTiled)-1];// okreslenie limitu od którego kostki(kafelki) po X mają być usunięte
           
            bModX = true;//ustawienie informacji, że była modyfikacja KOLUMN
        
            var modY_X = this.imgPos.posT[0];//modyfikacja wartośi X - lewa górna //modyfikator X dla KOLUMN
            var modX_X = (xTiled>0)?this.imgPos.posL[0]-(xTiled*this.tiledS):this.imgPos.posL[this.imgPos.posL.length-1]+this.tiledS; //modyfikator Y dla KOLUMN
                  
            this.border.left -= xTiled*this.tiledS;//ustalenie nowej wartości \"zakrytej\" dla lewej
            this.border.right -= (xTiled*this.tiledS); //ustalenie nowej wartości \"zakrytej\" dla prawej
    
        }
?>
[PHP] pobierz, plaintext 

2/3

3/3

[PHP] pobierz, plaintext 
<?php
if(bModY || bModX)//jesli była jakaś modyfikacja
        {
            $("#movingDiv img").each(
                    function(i)
                    {
             if($this.checkRemove(parseInt($(this).css("top")),limY,(yTiled>0)) && bModY)//jesli kafelek spełnia warunek to go usuń (góra lub dół)
                        {
                            $(this).remove();
                        }
                     
                        if($this.checkRemove(parseInt($(this).css("left")),limX,(xTiled>0)) && bModX)//jesli kafelek spełnia warunek to go usuń (prawa lub lewa)
                        {
                            $(this).remove();
                            remX++;
                        }
                    }
                );
       }      
       this.lastPos.top = this.tiledS + this.border.top;//modyfikacja ostaniej pozycji TOP diva ruchomego uwzględniająca "zakrycie górne"
       this.lastPos.left = this.tiledS + this.border.left;//modyfikacja ostaniej pozycji LEFT diva ruchomego uwzględniająca "zakrycie górne"    
 
 
       if(bModY){   //jesli była modyfikacja Y - wiersze - 
          modX_Y = (bModY)?modX_Y:modY;//ustalenie modyfikacji X dla Y
          modY_Y = (bModY)?modY_Y:modY;//ustalenie modyfikacji Y dla Y
          cMinX = (xTiled>0)?cMinX:cMinX-xTiled;//ustalenie X który ma być początekiem dla wiersza
          cMaxX = (xTiled>0)?cMaxX-xTiled:cMaxX;//ustalenie X który ma być końcem dla wiersza
      //chodzi o to, że jak dodaje kafelki to kolumny dodaję w całości, a wiersze w uzglednieniu juz dodanych kolumn, czyli aby narożne pozycje się nie dublowały
        
          var elX = (xTiled>0)?0:Math.abs(xTiled);//od jakiego X nalezy zacząć
          this.completeDiv(bY, eY, cMinX,cMaxX,modX_Y,modY_Y,elX);//uzupełnianie wierszy
     
      }
      if(bModX){ //jesli była modyfikacja Y - kolumny - 
          modX_X = (bModX)?modX_X:modX;;//ustalenie modyfikacji X dla X
          modY_X = ((bModX)?modY_X:modY)-(this.tiledS*yTiled);;//ustalenie modyfikacji Y dla X
          this.completeDiv(cMinY-yTiled, cMaxY-yTiled,bX,eX,modX_X,modY_X,0);//uzupelnianie kolumn z uwzględnieniem ( cMaxY-yTiled) nowo dodanych wierszy
      }   
    }
?>
[PHP] pobierz, plaintext 

Tak to wygląda - jak na razie działa, sprawdziłem, ale być może da się to ulepszyć, zmienić, napisac to krócej, może jak ktos bedzie miał czas, ochotę i pomysł, uwagi jak to zmienić, ulepszyć to chętnie się zapoznam

Ten post edytował fragles 18.12.2008, 19:33:15