[JS/PHP] Drag & Drop volgorde

[flashin]

Beste mensen,

Ik wil voor mijn CMS (eigen gebruik) een file drag 'n drop maken. (Dat ik bestanden van volgorde kan veranderen en in verschillende categorieen zetten)

Hierbij zat ik te denken aan een combo van deze 2 (aangezien ik nog niet echt heel gevorderd met met JS):
http://www.siteexperts.com/tips/styles/ts35/page1.asp
http://webfx.eae.net/dhtml/selectableelements/demo.html

Mijn vraag is nu, hoe kan ik het beste de veranderde volgorde "overbrengen" naar een array/variabelen (js)? Of is het handiger om daarvoor mijn eigen drag 'n drop & selecteerscript voor te schrijven?

bvd.

edit:
:x sorry voor vage titel

[ Voor 9% gewijzigd door flashin op 28-09-2003 12:57 . Reden: titel :s ]

[McVirusS]

Aangezien jij volgens mij best wel iets specifieks wilt is het wellicht handig om die 2 voorbeelden te gebruiken om zelf iets te schrijven (dan weet je tenminste dat het precies doet wat jij wilt). Er zijn verschillende mogelijkheden om dit over te brengen naar PHP, een oplossing die ik al regelmatig met suc6 heb gebruikt is de ID's van items waarvan je volgorde wilt veranderen in de juiste volgorde commagescheiden in een hidden formfield gooien. In PHP split je die waarde dan op comma en loop je door die Array heen terwijl je de juiste volgorde waarde aan het databaseitem geeft.

Klein voorbeeldje van iets wat ik lang geleden gemaakt hebt wat dat doet (JS kant dan): http://www.devslet.nl/js/sorteer.html

Ik zou sowieso nog eens kijken naar PHP en hoe je Array's kan submitten naar PHP (tip: [] achter variabele naam in HTML).

Suc6 , ben wel benieuwd naar eindresultaat.

^{Titel aangepast}

[SchizoDuckie]

Heej zoiets heb ik dus laatst ook gebouwd voor m'n formbuilder
Komt wel een bergje scriptwerk bij aan te pas, maar dat mag de pret niet drukken

Wat er gebeurt:
• De Tr's hebben ID's, en worden bij een druk op de knop omhoog of omlaag verplaatst.
• bij de formsubmit worden alle tr's afgelopen, de id's in een <SELECT MULTIPLE> geplaatst, en deze geselecteerd

http://www.zapguide.nl/sort/

[Verwijderd]

heb ik ooit ook eens gemaakt.
wat ik deed is gewoon elementen removen en inserten waar je ze wilt en als je submit idd ook de id's aflopen en die in een hiddenfield gekwakt.

De boel was trouwens ook drag en drop, ik kan alleen effe niet meer vinden of ik het voorbeeld nog heb

[flashin]

Hey beetje late reactie, maar allemaal bedankt!

hier kom ik echt een stuk verder mee!

Ik zou sowieso nog eens kijken naar PHP en hoe je Array's kan submitten naar PHP (tip: [] achter variabele naam in HTML).

Dit zou wel het handigste zijn, ik ga het ff uitzoeken .

De boel was trouwens ook drag en drop, ik kan alleen effe niet meer vinden of ik het voorbeeld nog heb

Als dit lukt lukt drag en drop ook wel toch bedankt als je het voorbeeld nog hebt liggen.

ik laat het resultaat zien als het er is

Wouter

[drm]

mophor:
heb ik ooit ook eens gemaakt.
wat ik deed is gewoon elementen removen en inserten waar je ze wilt en als je submit idd ook de id's aflopen en die in een hiddenfield gekwakt.

Exact, voor dit soort dingen moet je gewoon DOM methodes gebruiken. insertBefore, insertAfter en removeChild zijn je vriend

[flashin]

JavaScript:

selected = 0;

var waardes = new Array();

function swaptrs(tableid, row1, row2)
{
    var tabl = document.getElementById(tableid).firstChild;
    var tr1 = document.getElementById(row1);
    var tr2 = document.getElementById(row2);
    var tmp = tabl.removeChild(tr2).cloneNode(true);
    tabl.insertBefore(tmp, tr1);
}

function docId(id)
{
if (id == 0) { alert('Selecteer eerst een rij!'); return(-1);}
return (document.getElementById(id))
}

function next(table)
{
    elm = docId(selected);
    if (elm.nextSibling && elm.nextSibling.id)
        swaptrs(table, elm.id, elm.nextSibling.id)
}

function last(table)
{
    elm = docId(selected);
    if (elm.previousSibling && elm.previousSibling.id)
        swaptrs(table, elm.previousSibling.id, elm.id)  
}

function select(id)
{
    if (id == selected)
    {
        docId(selected).style.backgroundColor='white';
        selected = 0;
        return
    }
    else 
    { 
        if (selected != id)
        {
            if (selected != 0) 
            { 
                docId(selected).style.backgroundColor = '#FFFFFF';
                docId(selected).style.color = '#000000';
            }

            selected = id; 
            docId(selected).style.backgroundColor = 'orange';
            docId(selected).style.color = "#FFFFFF";
            return
        }
    }
}

function list(table)
{

    var lijst = docId('sortList[]');

    elm = docId(table).firstChild.firstChild;

// vind dit niet zo netjes :x
    document.forms[0].elements['waardes'].value = elm.id;
    document.forms[0].elements['waardes'].value += ";";

    for (i = 1; i < 5; i++)
    {
// dit ook niet :x
        document.forms[0].elements['waardes'].value += elm.nextSibling.id;
        document.forms[0].elements['waardes'].value += ";";

        elm = elm.nextSibling;

    }

    document.forms[0].submit();

}

function color(id, color, text)
{

    if (id != selected)
    {
        document.getElementById(id).style.backgroundColor = color;
        document.getElementById(id).style.color = text;
    }

}

Bedankt allemaal , nu nog drag und drop.. Ik dank jullie zeer

[drm]

Waarom clone je de node hier

code:

    var tmp = tabl.removeChild(tr2).cloneNode(true);
    tabl.insertBefore(tmp, tr1);

Als je 2 elementen wilt omwisselen hoef je niet eens te removen of te clonen. Als een element een nieuwe plaats krijgt in de tree verdwijnt 'ie sowieso van z'n oorspronkelijke plaats Een enkele insertBefore is dus genoeg.

En volgens mij werk je teveel met id's. Je kunt veel beter gewoon de elementen als parameters aan de functies meegeven ipv. de id's. Dat is niet alleen sneller maar daar krijg je ook veel compactere en leesbaardere code door.

edit:

even ter illustratie

code:

   <script>
   function swap ( a, b ) {
      a.parentNode.insertBefore ( b, a );
   }
   </script>
   ...
   <div><div onclick="swap(this,this.nextSibling)">asdf</div><div>asdfasdf</div></div>

Niet code die je over moet nemen, maar even om te laten zien hoe eenvoudig 't werkt als je gewoon via de elementen zelf werkt

[ Voor 26% gewijzigd door drm op 04-10-2003 15:44 ]

[flashin]

bedankt, zal er is naar kijken. Ik heb wel veelal de code overgenomen van de voorbeelden hierboven, omdat ik zelf nog niet echt een dhtmlguru ben zoals je al zag.

Ik stuiter gelijk tegen een ander probleem aan, de drag 'n drop. heel erg lekker werkt de info in dit artikel niet (http://www.siteexperts.com/tips/styles/ts35/page1.asp) en ik kan nergens goede uitleg over goede targeted drag en drop vinden.

kan iemand hierbij helpen

bvd again..

[BetuweKees]

heb ooit eens iets dergelijks gedaan door in de drop uit te rekenen boven welk ander element de boel was terecht gekomen (obv x en y coordinaten en opzet van de pagina die fixed was), maar dat lijkt me niet helemaal de goede methode, en zal trouwens met DOM (dit was al weer een paar jaar geleden) vast veel sneller kunnen..

[flashin]

Ik heb nog beetje rondgesurft, maar kan ook niet veel anders vinden dan dat algoritme. Ik zal het toch maar moeten proberen..

[drm]

Wordt het mouseover event dan niet gefired zolang de dragstart van een ander element nog geldt? In dat geval kun je namelijk gewoon een vlaggetje setten waarin vermeldt wordt of een element gedragged wordt, en door van elk ander element waarin gedropped mag worden de mouseovers bij te houden nagaan waarin gedropped wordt als het mouseup event weer gefired wordt van het gedragde element.... da's even een leuke volzin, maar misschien volg je 'm

eens kijken of dat werkt ...

edit:

hm nee, ik geloof dat 't idee leuk is, maar de praktijk een beetje anders

[ Voor 9% gewijzigd door drm op 05-10-2003 01:18 ]

[flashin]

Ja ik volg ehm

Bedankt voor de moeite, maar ik denk dat ik het bij dit maar laat. Alleen nog ff minder met ID's werken..

Wouter