Javascript drag + drop in grid?
Om de gebruiksvriendelijkheid van een website waar ik aan werk te verbeteren zou ik graag willen dat de divs op de site verplaatst kunnen worden. Zo kan iedereen de pagina's aanpassen naar hun wensen en is het vaak makkelijker om wat op te zoeken op deze manier.
Maar nu is mijn vraag: hoe krijg ik dit voor elkaar? Ik heb al een aantal java frameworks bekeken, maar dan krijg ik veel te veel code erbij dat weer ingeladen moet worden terwijl het niet gebruikt zal worden.
Daarom vroeg ik me af of iemand hier ervaring heeft met het verplaatsbaar maken van divs, en dat ze wel in een soort grid schieten bij het loslaten (zegmaar de persoonlijke pagina van google)?
Mvg,
Nivek
verplaatsbaar maken doe je met een onmousedown, onmousemove en onmouseup
bij de onmousedown geef je (met een variabele) aan dat je aan het slepen bent, ook geef je aan welke div je aan het slepen bent en bereken je de mouse-offset
bij de onmousemove kijk je eerst of je aan het slepen bent (met die variabele dus), dan neem je de muispositie - de offset voor de positie van de div en dat kun je dus aanpassen met document.getElementById(draggedDiv).style.left/top
bij de onmouseup zeg je eerst dat je niet meer aan het slepen bent (weer met die variabele). dan kijk je bij welke 'gridlines' de positie het dichtst in de buurt licht en dan verplaats je de div daarnaar toe.
ik heb nu geen zin om code voor te kauwen, dus ik hoop dat je hiermee verder komt ;)
Jacco schreef op 22.08.2008 14:58:
Precies wat ik bedoelde. Ik ga er vanavond of morgen even mee aan de slag en kom er dan op terug.
Bedankt voor de reacties. Het probleem was dat ik zelf geen javascript held ben en ik geen zin had om een compleet javascript framework te moeten gebruiken ^^..
En ja, het opslaan ect. is geen probleem.
Quote:
en kom er dan op terug.
Denk het niet :P want die tut is dusdanig helder dat alles vrij vlot zou moeten gaan :P
Deze hieronder niet en is dit script dus veel kleiner
http://www.dhtmlgoodies.com/scripts/arrange-nodes-2/arrange-nodes-2.html
ceasar schreef op 22.08.2008 16:17:
Die link hierboven werkt ook met een frame work prototype
Deze hieronder niet en is dit script dus veel kleiner
http://www.dhtmlgoodies.com/scripts/arrange-nodes-2/arrange-nodes-2.html
Deze hieronder niet en is dit script dus veel kleiner
http://www.dhtmlgoodies.com/scripts/arrange-nodes-2/arrange-nodes-2.html
Klopt helemaal.. Bedankt voor je tip.
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
Hij werkt, alhoewel ik hem niet helemaal naar behoren vind werken, maar nu zit ik met het live updaten van de database.
Hier staat de code en uitleg hoe ik hem gebruik:
http://www.dhtmlgoodies.com/index.html?showDownload=true&whichScript=arrange-nodes-2
Hoe zorg ik er dus voor dat hij na elke verandering oftewel drop, hij de savedata() oproept en dit wegschrijft naar de database?
p.s. Hier wat er op dit moment mee werkt: http://208.101.38.186/beta2/
voor de ajax request kan je om het eenvoudiger te maken een javascript framework in de handen nemen (mootools ^^ )
om de volgorde van de blokken te achterhalen kan je ze allemaal een id geven met hun nummer erin (ik weet niet ofdat je evt ook dubbele id's kan gebruiken).
voor de ajax request kan je om het eenvoudiger te maken een javascript framework in de handen nemen (mootools ^^ )
om de volgorde van de blokken te achterhalen kan je ze allemaal een id geven met hun nummer erin (ik weet niet ofdat je evt ook dubbele id's kan gebruiken).
voor de ajax request kan je om het eenvoudiger te maken een javascript framework in de handen nemen (mootools ^^ )
om de volgorde van de blokken te achterhalen kan je ze allemaal een id geven met hun nummer erin (ik weet niet ofdat je evt ook dubbele id's kan gebruiken).
voor de ajax request kan je om het eenvoudiger te maken een javascript framework in de handen nemen (mootools ^^ )
om de volgorde van de blokken te achterhalen kan je ze allemaal een id geven met hun nummer erin (ik weet niet ofdat je evt ook dubbele id's kan gebruiken).