element volgorde bepalen met plek van muisklik
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)
1
2
3
4
5
2
3
4
5
<div id="test-container">
<h1>Tekst</h1>
<p>Nog meer tekst</p>
<b>Tekst...</b>
</div>
<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.
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)
1
2
3
4
5
6
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>
<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.
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.
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 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.
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