volgorde listbox veranderen dmv drag n drop - Softwareontwikkeling

dinsdag 31 mei 2005 19:44

Acties:

Topicstarter

Ik ben op zoek naar een listbox waarbij de gebruiker mbv drag n drop de volgorde van de items kan veranderen.

Ik wil het toepassen voor het kunnen veranderen van de volgorde van categorieen in een cms systeem.

Ik heb heel wat af ge-googled en 1 heel mooi resultaat gevonden:

http://www.scbr.com/docs/products/dhtmlxTree/

Ik vind het een beetje overkill.

Vandaar dat ik vraag of iemand een wat simpelere JS-oplossingen weet die gebruikt maakt van een basic multiple-listbox en alleen items van 1 niveau laat zien?

[EDIT]
Daarnaast is het bij dit script niet makkelijk om de volgorde op hetzelfde niveau aan te passen. Vandaar dat ik op zoek ben naar een alternatief

[ Voor 12% gewijzigd door MrQcue op 31-05-2005 19:53 ]

dinsdag 31 mei 2005 20:28

Acties:

r0bert

je kunt gewoon functieknoppen achter de items doen
<- niveau lager (parentNode)
-> subitem aanmaken ofzo, moet je even kijken wat handig is (appendChild)
/\ Plekje naar boven (previousSibling, cloneNode, replaceNode)
\/ Plekje naar onder (nextSibling, cloneNode, replaceNode)

Dus

code:

1	eenitem < /\ \/ >

zeg maar

e: met 1 niveau? dan heb je dus de < en > niet eens nodig..

[ Voor 37% gewijzigd door r0bert op 31-05-2005 20:30 ]

dinsdag 31 mei 2005 20:40

Acties:

MrQcue

Topicstarter

Wat je zegt zou heel goed kunnen (ik heb daar ook aan gedacht). Ik vind het alleen veel gebruiksvriendelijker om het mbv een drag n drop te maken. Vandaar dat ik via deze weg vroeg of iemand ooit wel eens zoiets is tegen gekomen of tutorials weet hoe je zoiets zelf kan maken.

dinsdag 31 mei 2005 23:09

Acties:

r0bert

Met drag&drop + domfuncties kom je al een eind. Stel iemand dropt een node op een andere, dan hoef je alleen dus het targetelement te achterhalen (moet toch bij een drop). Dan handel je het type element af, als het bijvoorbeeld een enkele node is, dropt ie m onder die node.

Daar kun je mooi iets mee maken met object, methodes cq prototypes als je het mij vraagt. Ik heb ook ooit eens precies gemaakt wat je nu vraagt, maar helaas heb ik de code niet meer..
^{Mailen/Msnen mag altijd natuurlijk}

dinsdag 31 mei 2005 23:14

Acties:

BtM909

Watch out Guys...

Gordijntje heeft een hele mooie gemaakt. Zal hem even op dit topic wijzen, aangezien ik niet ga bepalen of het zomaar geshared mag worden

[ Voor 19% gewijzigd door BtM909 op 31-05-2005 23:15 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 31 mei 2005 23:16

Acties:

Verwijderd

Ik vind alles prima

dinsdag 31 mei 2005 23:17

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op dinsdag 31 mei 2005 @ 23:16:
Ik vind alles prima

Is dit het begin van een quest? Zoek de treeview van Gordijn

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 31 mei 2005 23:21

Acties:

Verwijderd

BtM909 schreef op dinsdag 31 mei 2005 @ 23:17:
[...]

Is dit het begin van een quest? Zoek de treeview van Gordijn

http://www.mschopman.demon.nl/

daar staan de versies, 1.6.2 is de huidige op die plek, ik heb intern een nieuwere maar heb nog geen tijd gehad om deze uit iets waar ik mee bezig ben te slopen. Zoals je ziet ben ik een ster in documenteren ... en het bijhouden ervan.

dinsdag 31 mei 2005 23:24

Acties:

MrQcue

Topicstarter

Ok, ik heb nu de volgende code gemaakt. Het werkt nu alleen nog in FireFox.

Ik kan nu 1 optie aanklikken/ingedrukt houden en deze slepen op de optie waar deze voor moet komen. Het probleem wat ik nu tegen kom is om een select box te sorteren. In PHP lukt me dat wel maar ik ben niet zo'n JS freak. Vandaar dat ik jullie hulp vraag.

code:

<html>

<script language="JavaScript" type="text/javascript">
var first = 0;
var second = 0;

function check_values (value) {
    if (first == 0) {
        first = value;
    }
    else {
        second = value;
    }

    if (first && second && first != second) {
        alert (first);
        alert (second);
        first = 0;
        second = 0;
    }
    else if (first == second) {
        first = 0;
        second = 0;
    }
}

</script>

<form>
    <select size="10">
        <option value="1" onMouseDown="javascript: check_values(this.value);" onMouseUp="javascript: check_values(this.value);">waarde 1</option>
        <option value="2" onMouseDown="javascript: check_values(this.value);" onMouseUp="javascript: check_values(this.value);">waarde 2</option>
        <option value="3" onMouseDown="javascript: check_values(this.value);" onMouseUp="javascript: check_values(this.value);">waarde 3</option>
        <option value="4" onMouseDown="javascript: check_values(this.value);" onMouseUp="javascript: check_values(this.value);">waarde 4</option>
    </select>
</form>

</html>

[ Voor 14% gewijzigd door MrQcue op 31-05-2005 23:39 ]

dinsdag 31 mei 2005 23:35

Acties:

r0bert

Handig is om even [ code ] tags om je code te plaatsen om het wat beter leesbaar te maken (monospaced en indention)

Maargoed, ik geloof niet dat ik goed begrepen heb wat je nou wou. Ik dacht dat je een soort navigatietree bedoelde met items die je kunt verslepen, zoals gordijnstok die inderdaad prachtig in elkaar gescript heeft (dat is een compliment

). Misschien kun je even aanduiden wat je plannen met bovenstaand script zijn? Je wil de options binnen een select gaan omwisselen? En daar dan nodes aan gaan koppelen ofzo

dinsdag 31 mei 2005 23:38

Acties:

MrQcue

Topicstarter

$_/-\o_$ Dank gordijnstok

Maar toch mis ik wat. Net zoals de tree waar de link naartoe wijst in mij startpost, is het niet makkelijk om items op hetzelfde niveau te sorteren. Het is niet heel makkelijk 'Item 3' boven 'item 2' te plaatsen.

Voorbeeld:

Item 1
Item 2
Item 3
Item 4

Te veranderen naar:

Item 1
Item 3
Item 2
Item 4

Wat ik dus nodig heb is een mogelijkheid om categorieën te sorteren in een cms. Dus de gebruiker moet de groepen kunnen verslepen (in zijn gewenste volgorde kunnen zetten) op hetzelfde niveau. Als je een groep versleept moet je die tussen 2 andere groep kunnen plaatsen. Het mag wel hierarchisch zijn met meerdere niveau's want dat is wel de bedoeling en op de manier van gordijnstok wel zo handig.

[ Voor 39% gewijzigd door MrQcue op 31-05-2005 23:48 ]

woensdag 1 juni 2005 00:04

Acties:

Spruit_elf

Intentionally left blank

http://tool-man.org/examples/edit-in-place.html zoiets? 2e voorbeeld

Those who danced were thought to be quite insane by those who could not hear the music.

woensdag 1 juni 2005 00:24

Acties:

MrQcue

Topicstarter

Jaaaa! Dat ziet er best cool uit. Ik zal er morgen even goed naar kijken.... Maar dat doet precies wat ik wil. Nog wel op een enkel niveau maar diepere niveau's zijn ook niet direct noodzakelijk.

woensdag 1 juni 2005 09:25

Acties:

Verwijderd

MrQcue schreef op dinsdag 31 mei 2005 @ 23:38:
$_/-\o_$ Dank gordijnstok

Maar toch mis ik wat. Net zoals de tree waar de link naartoe wijst in mij startpost, is het niet makkelijk om items op hetzelfde niveau te sorteren. Het is niet heel makkelijk 'Item 3' boven 'item 2' te plaatsen.

Voorbeeld:

Item 1
Item 2
Item 3
Item 4

Te veranderen naar:

Item 1
Item 3
Item 2
Item 4

Wat ik dus nodig heb is een mogelijkheid om categorieën te sorteren in een cms. Dus de gebruiker moet de groepen kunnen verslepen (in zijn gewenste volgorde kunnen zetten) op hetzelfde niveau. Als je een groep versleept moet je die tussen 2 andere groep kunnen plaatsen. Het mag wel hierarchisch zijn met meerdere niveau's want dat is wel de bedoeling en op de manier van gordijnstok wel zo handig.

Dat kan wel, daarvoor zijn de methods moveUp, en moveDown. selectedNode kan elke referentie naar een node object zijn.

<a href="#" onclick="mytreeview.selectedNode.moveUp()">move up</a>
<a href="#" onclick="mytreeview.selectedNode.moveDown()">move down</a>

woensdag 1 juni 2005 10:25

Acties:

Pelle

🚴‍♂️

Sorry, maar scriptrequests doen we hier niet aan