Flyttbare listeelementer

[jarandmi]

Holder på å lære meg mer innenfor Javascript, DOM, Ajax osv og holder i den sammenheng med på å lage en sorterbar liste. Med det mener jeg noe følgende: http://tool-man.org/examples/sorting.html.

Jeg vil bygge menyen opp av lister. En liste kan se slik ut:

Kode: Merk alt

<ul>
   <li>Hovedmeny1_nivå1
      <ul>
         <li>Undermeny1_nivå2</li>
         <li>Undermeny1_nivå2</li>
      </ul>
   </li>
   <li>Hovedmeny2_nivå1
      <ul>
         <li>Undermeny2_nivå2</li>
         <li>Undermeny2_nivå2</li>
      </ul>
   </li>
</ul>

Listen (menyen) kan også ha flere nivåer.
Jeg ønsker å ha mulighet til å dra de forskjellige <li> elementene opp og ned for å endre rekkefølge. Når ett element har ett nivå under seg, skal også disse bli med i flyttingen.

Jeg er bortimot blank på hvor jeg skal begynne og hva jeg skal se på i javascript/DOM. Noen som kan sparke meg p åriktig vei, og eventuelt gi meg noen tips?

[ak]

Hei,

jeg har lekt litt med dette. Generelt tror jeg du vil bruke et JavaScript bibliotek som forenkler dette.

Eksempler:
http://extjs.com/
http://developer.yahoo.com/yui/
http://jquery.com/
http://mootools.net/

Jeg er amatør, men den jeg fikk mest sansen for var MooTools og dere sortables:
http://demos.mootools.net/Sortables

[jarandmi]

Har (nesten) innsett at jeg muligens må bruke ett bibliotek. Litt dumt i og med at det blir en del kode som kun tar plass, når jeg skal legge det inn i systemet mitt.

Har blant annet sett på scriptaculous. Funket ikke helt som jeg ville, men langt på vei. Kanskje noen av bibliotekene du lenker til fungerer bedre. Skal iallefal lta en titt.

Takk for hjelpen. Kommer tilbake når jeg har har testet de ut.

[decodex]

Man lærer absolutt mest av å skrive ting selv. Men jeg skal love deg at å implementere sortering fra bunnen av vil sørge for at du ender uten hår på hodet om du ikke har kodet særlig JavaScript før.

Hovedproblemet ligger i de mange forskjellene i nettleseres håndtering av hendelser, og støtte for å lese ut CSS-egenskaper og posisjoner for elementer.

En god ressurs for å få en oversikt over forskjeller mellom nettlesere er quirksmode.org, flittig vedlikeholdt av Peter-Paul Koch i mange år nå. Uvurderlig ressurs.

Ellers er Mozillas «Gecko DOM Reference» en god kilde til informasjon om DOMens API for de nettlesere som følger W3Cs modell.

Noen nyttige grunnfunksjoner du vil trenge:
1. Et knippe funksjoner som abstraherer nettleseres forskjeller rundt oppkobling av hendelseslyttere («event listeners»). Søk på «addEventListener» for eksempler, eller se på dokumentasjonen og koden for YAHOO.util.Event.

2. Et knippe funksjoner som abstraherer nettleseres forskjeller rundt lesing av hendelsesegenskaper, posisjonen til et element på siden og gjerne CSS-egenskaper.

Så kan det jo være greit å lese seg litt opp på mer moderne metoder å strukturere og kode i JavaScript. F.eks. Crockfords module pattern (videre diskusjon hos Chris Heilmann).

Tror det får være nok informasjon akkurat nå Som ak sier er det nok greiest å finne seg et bibliotek man føler seg komfortabel med, om du ikke har lyst å bruke mye tid på å implementere noe såpass komplekst fra bunnen av.