Javascript drag + drop in grid?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Kevin Tuns

Kevin Tuns

22/08/2008 14:39:00
Quote Anchor link
Hey allemaal,

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
 
PHP hulp

PHP hulp

28/03/2024 09:54:26
 
Jacco Engel

Jacco Engel

22/08/2008 14:58:00
 
Leroy Boerefijn

Leroy Boerefijn

22/08/2008 15:02:00
Quote Anchor link
nou.. allereerst moet je de posities van de div's opslaan in de database, dit kan je zelf wel?

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 ;)
 
- wes  -

- wes -

22/08/2008 15:11:00
Quote Anchor link
@leroy , of kijk wat jacco poste en doe dat... je denkt veels te moeilijk
 
Leroy Boerefijn

Leroy Boerefijn

22/08/2008 15:39:00
Quote Anchor link
ik was bezig met typen toen hij postte ;)
 
Jelmer -

Jelmer -

22/08/2008 15:40:00
Quote Anchor link
Ik was een tijdje geleden bezig met iets vergelijkbaars volgens mij. Mijn ding was vooral bedoeld voor het maken van collages, maar ik moet het nog een keer afmaken. En werkend krijgen in andere browsers dan Safari (en Firefox?)
 
Kevin Tuns

Kevin Tuns

22/08/2008 16:00:00
Quote Anchor link
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.
 
Jacco Engel

Jacco Engel

22/08/2008 16:13:00
Quote Anchor link
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
 
Ceasar Feijen

Ceasar Feijen

22/08/2008 16:17:00
Quote Anchor link
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
 
Kevin Tuns

Kevin Tuns

22/08/2008 17:08:00
Quote Anchor link
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


Klopt helemaal.. Bedankt voor je tip.
Gewijzigd op 01/01/1970 01:00:00 door Kevin Tuns
 
Kevin Tuns

Kevin Tuns

23/08/2008 14:53:00
Quote Anchor link
Oke, na het uitproberen van beide script heb ik gekozen voor die van www.dhtmlgoodies.com.

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/
 
Kevin Tuns

Kevin Tuns

24/08/2008 18:07:00
Quote Anchor link
Niemand?
 
Ivar

ivar

24/08/2008 19:53:00
Quote Anchor link
dit kan je doen met ajax, in de savedata() kan je een ajax request doen naar een php pagina die dan de indeling opslaat in een db icm een ip adres oid.

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).
 
Ivar

ivar

24/08/2008 19:53:00
Quote Anchor link
dit kan je doen met ajax, in de savedata() kan je een ajax request doen naar een php pagina die dan de indeling opslaat in een db icm een ip adres oid.

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).
 
Ivar

ivar

24/08/2008 19:53:00
Quote Anchor link
dit kan je doen met ajax, in de savedata() kan je een ajax request doen naar een php pagina die dan de indeling opslaat in een db icm een ip adres oid.

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).
 
Ivar

ivar

24/08/2008 19:53:00
Quote Anchor link
dit kan je doen met ajax, in de savedata() kan je een ajax request doen naar een php pagina die dan de indeling opslaat in een db icm een ip adres oid.

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).
 
Kevin Tuns

Kevin Tuns

24/08/2008 20:25:00
Quote Anchor link
Nou savedata() geeft de nieuwe volgorde al die je in een array kan gooien en dan in de database kan gooien. Wat ik me wel afvraag is hoe ik die ajax request aanroep na het loslaten van een blok op zijn nieuwe positie..
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.