Flytte en liste af span-tags op og ned!

Det er vel ikke så svært, selvom det lader til at være en lidt bøvlet ting at gøre. Jeg går udfra at der ikke er andet html udenfor spannene. Det ville være en fordel hvis området med spannene var omgivet af nogle div tags, eller at det kun var body der var udenom. Så skriver du bare indholdet til div eller body tagget:
Du gemmer i for det span du er interesseret i.
        if (mySpans[i].id == iid)
            {
                //Her er det korrekte span/id fundet. Nu skal det bare flyttes OP!;
gemti = i
            }
Så skriver du al indholdet af dit span array, optil der hvor du vil placere dit span, til dit område:
document.body.innerHTML = ""
for (a = 0; a < nyeposition; a ++){
  document.body.innerHTML += mySpans[a];
}
  document.body.innerHTML += mySpans[gemti];
for {a = nyeposition; a < gemti; a++){
  document.body.innerHTML += mySpans[a]
}
for {a = gemti + 1; a < mySpans.length; a++){
  document.body.innerHTML += mySpans[a]
}
og så skulle den være der.

Hov, svar

Hejsa Ras!

Hvordan finder jeg variablen "nyeposition" ?

Det er nu ikke så bøvlet en idé, som du måske tror. Det kan være, at selve min kode ser bøvlet ud, men selve funktionen bliver rigtigt fed, når den engang virker! ;)

Tak for hjælpen,

Thomas.

Jamen nyeposition er der hvor du gerne vil flytte dit tag op. Hvis du bare vil flytte den et tak op, så er nyeposition = gemti - 1. Hvis du vil flytte den 10 pladser op, så er nyeposition = gemti - 10. Hvis den skal være øverst, så nyeposition = 0. Osv.
Koden forudsætter at der ikke er andet i dine body tags, end spannerne, hvis det ikke er tilfældet, så skal du nok have et par div tags uden om, med et id, eks "her". Så skal du skrive document.all.her.innerHTML, i stedet for document.body.innerHTML.

Okay!.. Jeg prøver! ;)

Tak for det!

Thomas.

Hvis du lige lægger et eksempel på hvordan hele siden kom til at se ud, altså mht kode, så kan jeg lige skrive javscriptet til dig, ellers kommer vi nok til at lave en del troubleshooting.

Okay!.. Her kommer selve funktionen:

function moveMenuUp(iid)
{
    var mySpans = document.all.tags("SPAN");
    for (var i = 0; i < mySpans.length; i++)
    {
        if (mySpans[i].id == iid)
            {
                found = i;
            }
    }
   
    document.all.myDivs.innerHTML = ""

    nyeposition = found -1;
   
    for (a = 0; a < nyeposition; a ++)
    {
        document.all.myDivs.innerHTML += mySpans[a];
    }
    document.all.myDivs.innerHTML += mySpans[found];
   
    for {a = nyeposition; a < found; a++)
    {
        document.all.myDivs.innerHTML += mySpans[a];
    }
       
    for {a = found + 1; a < mySpans.length; a++)
    {
        document.all.myDivs.innerHTML += mySpans[a];
    }
   
}

Og her kommer et uddrag af selve siden:

<form method=post name=myMenus action=_save_menu.asp ID="Form1">
    <div id=myDivs>
        <b><span id=256 class=clickableSpan oncontextmenu='displayMenu(); return false'>Produktet</span>
        </b>
            <br>
                ... <span id=281 class=clickableSpan oncontextmenu='displayMenu(); return false'>Tekst1</span>
            <br>
            ...... <span id=287 class=clickableSpan oncontextmenu='displayMenu(); return false'>Tekst2</span>
            <br>
            ...... <span id=298 class=clickableSpan oncontextmenu='displayMenu(); return false'>Tekst3</span>
            <br>
            ... <span id=282 class=clickableSpan oncontextmenu='displayMenu(); return false'>Tekst4</span>
            <br>
            ...... <span id=285 class=clickableSpan oncontextmenu='displayMenu(); return false'>Tekst5</span>
            <br>
            ...... <span id=286 class=clickableSpan oncontextmenu='displayMenu(); return false'>Tekst6</span>
    <div id=newField></div>
        <div id=extra></div>
    </div>
    </form>

Håber, at du kan overskue det! ;)

Thomas.

Ingen problemer med at overskue det, jeg er da vant til at kigge på meget mere uoverskueligt rod, det jeg selv laver feks.
Her er et forslag. Du kan bare klikke på et span, så flytter det et hak op, hvis det ikke allerede er øverst. Jeg flyttede slut tagget på dit div, for at få det til at fungere. Du må lige sige til, hvis det ikke gør som du havde tænkt.
<html>
<head>
<script type="text/javascript">
function moveMenuUp(iid)
{
    var mySpans = document.all.tags("SPAN");
    for (var i = 0; i < mySpans.length; i++){
        if (mySpans[i].id == iid){
        found = i;
        }
    }
    if (found > 0){
    mypos = found - 1;
    str = "<b>";
    for (var i = 0; i < mySpans.length; i++){
        if (i == found || i == mypos){
        if (i == found) str += mySpans[mypos].outerHTML + "<br>";
        if (i == mypos) str += mySpans[found].outerHTML + "<br>";
        }else{
        str += mySpans[i].outerHTML + "<br>";
    }
    if (i == 0) str += "</b>";
    }
    document.all.myDivs.innerHTML = str;
    }
}

</script>
</head>
<body>

<form method=post name=myMenus action=_save_menu.asp ID="Form1">
    <div id=myDivs>
        <b><span id=256 class=clickableSpan oncontextmenu='displayMenu(); return false' onclick="moveMenuUp(this.id)">Produktet</span>
        </b>
            <br>
            <span id=281 class=clickableSpan oncontextmenu='displayMenu(); return false' onclick="moveMenuUp(this.id)">Tekst1</span>
            <br>
            <span id=287 class=clickableSpan oncontextmenu='displayMenu(); return false' onclick="moveMenuUp(this.id)">Tekst2</span>
            <br>
            <span id=298 class=clickableSpan oncontextmenu='displayMenu(); return false' onclick="moveMenuUp(this.id)">Tekst3</span>
            <br>
            <span id=282 class=clickableSpan oncontextmenu='displayMenu(); return false' onclick="moveMenuUp(this.id)">Tekst4</span>
            <br>
            <span id=285 class=clickableSpan oncontextmenu='displayMenu(); return false' onclick="moveMenuUp(this.id)">Tekst5</span>
            <br>
            <span id=286 class=clickableSpan oncontextmenu='displayMenu(); return false' onclick="moveMenuUp(this.id)">Tekst6</span>
    </div>
    <div id=newField></div>
    <div id=extra></div>
</form>
</body>
</html>

Det virker stort set efter hensigten!!!!.. SÅDAN!!!!

Det er fandme sejt gjort!! Tak for hjælpen!! :)

Med venlig hilsen,

Thomas.

Det var så lidt!
Du skal nok have en style="cursor:hand" inde i dit span, hvis det da ikke ligger i din class="clickablespan"