element volgorde bepalen met plek van muisklik

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark Hogeveen

Mark Hogeveen

12/05/2013 13:01:31
Quote Anchor link
Hallo,

Als ik een container heb, en er wordt in geklikt dan moet ik het element hebben waar "achter" wordt geklikt in die container
Ik heb bijvoorbeeld dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<div id="test-container">
<h1>Tekst</h1>
<p>Nog meer tekst</p>
<b>Tekst...</b>
</div>

Als ik nu achter het <p> element klik, maar voor de <b>, dan moet javascript dus weten dat ik tussen die 2 dingen heb geklikt. Als ik precies op een element zelf klik en dus niet ertussen, dan moet javascript gewoon doen alsof ik erachter heb geklikt. (Dat is dus eigenlijk ook tussen 2 elementen in, tenzij dat het het laatste element in de container is)
Ik moet dus de 2 elementen krijgen waar ik tussen klikte, of 1 element waar ik op klikte

Heb al van alles geprobeerd, maar doet niet wat het moet doen.
 
PHP hulp

PHP hulp

28/03/2024 13:49:50
 
Kevin Driessen

Kevin Driessen

15/05/2013 18:47:41
Quote Anchor link
Je stelling is moeilijk te bevatten, maar ik zal een poging doen.

Zoals de code in jouw voorbeeld gegeven is, geloof ik niet dat er een 'tussen' bestaat voor het p-element en het b-element. Als je ertussen probeert te klikken, dan zul je altijd ofwel op het p-element klikken, ofwel op het b-element. Zie het als blokken die exact aan elkaar grenzen.

Even een aanpassing op jouw voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<div id="test-container">
<h1>Tekst</h1>
<p>Nog meer tekst</p>
tekst tussen het p- en b-element in.
<b>Tekst...</b>
</div>


Dit voorbeeld bevat niet echt nette code, maar nu kan er gezegd worden dat je klikt op iets dat tussen het p- en het b-element in staat, namelijk op een stuk tekst. Als je klikt op dat stuk tekst, dan detecteer je met javascript dat je op de test-container klikt.
Het wordt dan erg moeilijk om te zeggen dat je dan het p- of b-element moet selecteren, omdat je vanuit dit punt gezien niets hebt om te zeggen dat één van deze element het dichts bij staat.

Als je echt met alle geweld dit concept moet maken, dan kan ik als enige uitweg bedenken dat je gaat werken met posities relatief aan de test-container:
- Je bepaald de x- en y- coördinaten van je muisklik, relatief aan de test-container.
- Voor ieder element binnen-in de test-container bepaal je de x- en y-coördinaten, eveneens relatief aan de test-container.
- Je kiest het element uit waarvan de coördinaten het dichts liggen bij de coördinaten van je muisklik.


Voor mij klinkt dat nogal omslachtig. Een beetje nette code lijkt me toch te vereisen dat die tekst moet staan in een element, waardoor het neer komt dat je klikt op dat element. Relatief aan dat element kun je dan zeggen 'pak het vorige element' of 'pak het volgende element'.


Je doel is overigens niet bekend. Misschien als je deze deelt, dat er een aanpak kan worden geboden die helpt je doel te bereiken.
 
Mark Hogeveen

Mark Hogeveen

15/05/2013 20:06:28
Quote Anchor link
Er is een menu waarin je op een item kan klikken, en dan klik je op een plek in de container om het daar neer te zetten.
Het is alsof je een afbeelding versleept in bijvoorbeeld Word. Alleen moet je daar echt slepen met de muis ingedrukt, en wil ik dat je gewoon klikt op een item in een lijst en vervolgens klikt op de plek waar je iets tussen wilt zetten.
Javascript moest dus weten tussen welke 2 elementen is geklikt.
Dus eigenlijk is mijn hele vraag hoe je zoiets maakt.
 
Erwin H

Erwin H

15/05/2013 20:15:22
Quote Anchor link
Kan je niet beter het 'tussen' definieren als 'voor' een item. Als je alle items in een container plaatst, zonder verdere absolute plaatsbepaling, dan zullen ze allemaal tegen elkaar aan komen. Klik je dan in de container dan klik je normaal gesproken op een item, niet ertussen. Enige uitzonderingen nog even daargelaten.
Met een klik zou ik dan definieren dat het element voor het element moet komen dat net aangeklikt is. Dat is allemaal vrij eenvoudig te doen.

Alleen wanneer de container niet helemaal goed kan worden gevuld met de elementen die erin staan krijg je lege ruimtes in de container waarvoor je nog zult gaan moeten bepalen wat er dan gebeurt. Staan er bijvoorbeeld drie elementen van ieder 100px breed in een container die zelf 350px breed is, dan houd je een strook van 50px over aan de rechterkant. Als daar geklikt wordt moet je weten hoe hoog er geklikt is en dus op welke 'rij' het nieuwe element moet komen. Om dat te doen zal je echt bij de klik in de container de exacte coordinaten moeten uitlezen en aan de hand van de absolute coordinaten van alle elementen in de container moeten bepalen voor welk element het nieuwe moet komen. Dat lijkt me overigens nog niet eens zo makkelijk....
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

15/05/2013 20:24:03
Quote Anchor link
In een ander topic:
Ger van Steenderen op 08/05/2013 11:37:20:
Ik gebruik daarvoor de jquery plugin jsTree. Die heeft een drag en drop feature, daarin wordt bijgehouden waar iets vandaan komt en wat de nieuwe positie is.
 
Kevin Driessen

Kevin Driessen

15/05/2013 21:14:20
Quote Anchor link
Oke, het idee is mij nu wat duidelijker. Ik denk dat er wel aardige plugins voor bestaan, maar als je zelfgeschreven code wil, dan hier een voorbeeldje van hoe je het kan aanpakken:

http://jsfiddle.net/hCgTS/1/


Ik hoop dat dit je op weg helpt ;)


PS: ik zat er overigens naast dat er geen 'tussen' bestaat. Je kunt geen 'tussen' selecteren, omdat dat immers niets is. Maar als je twee p-element hebt, dan zorgt de margin voor een lege ruimte. Klik je in die lege ruimte, dan selecteer je geen van beide p-elementen. Daarmee was je gedachtegang achter het concept 'tussen' niet verkeerd.
Gewijzigd op 15/05/2013 21:26:41 door Kevin Driessen
 



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.