[JavaScript] Drag en elementFromPoint fout

[kvdd]

Tools:
Even wat ik gebruikt, geen idee of het ter zake doet:
XAMPP 1.6.8
jQuery
jQuery-ui
jQuery-form
jQuery-interface
Talen: PHP
Verder ook: JavaScript, CSS, HTML

Uitdaging:
Ik heb een pagina met honderden draggables, en 1 droppable. Als ik een element drag&drop, dan wordt op de drop gekeken naar waar de muis zich op dat moment bevindt (clientX, clientY), met die coordinaten achterhaal ik het element id op de volgende manier:

JavaScript:

document.elementFromPoint(ev.clientX, ev.clientY).parentNode.id;

Wat wil het geval nu, als ik naar beneden toe drag gaat het goed, drag ik naar boven toe, gaat het fout.
Drag ik naar boven toe dan zietie de draggable die ik vast heb als het element id via de elementFromPoint.

Download:
Ik denk dat ik het probleem het beste kan uitleggen door het complete (HTML source) script te geven, en te tonen wat er fout gaat: http://www.megaupload.com/?d=SZK8UFXT

Voorbeeld:
Als je het script download:
1) Open de index.html
2) Links bovenaan zie je een 8 staan en de tekst 'test'
3) Sleep deze naar een vakje naar beneden, of naar opzij
4) Probeer eens diezelfde 'test' naar boven te slepen?
5) Stap 3 gaat dus niet, je krijgt mijn eigen-gedefinieerde foutmelding, naar beneden nog steeds overigens
6) Dit is dus exact mijn probleem/uitdaging, ben er enkele dagen mee bezig, en heb ook een alternatief elementFromPoint JavaScript gebruikt, maar dat hielp niet.
Zelf heb ik het idee dat het probleem em niet ligt in de elementFromPoint functie opzich, maar meer dat de draggable als element gepakt wordt omdat er iets mis zit met de pagina coordinaten als ik naar boven toe muis.

Waarom maak je dan niet ook honderden jQuery droppables?
Omdat dat een enorm performance probleem geeft, je kan dan amper rond draggen met een draggable, of je processor staat op full load. Is dan helemaal niet mee te werken zeg maar.

Disclaimer:
Met PHP kan ik het 1 en ander bouwen, maar met JavaScript een leek, net mee begonnen.

Ik hoop dat er mensen met tijd zijn, die niet terugschrikken om mijn -mogelijk- belabberde JavaScript source willen bekijken!

[kvdd]

Ik kom nu ineens op het idee om de clientX en clientY -1px of iets in die trant te doen. Vanmiddag meer.

Edit:
Oplossing gevonden:
Het is nu verholpen d.m.v. elementFromPoint(e.clientX-6, e.clientY).parentNode.id

Heb ik hier nu dagen, verspreid over enkele weken naar lopen zoeken??

[ Voor 50% gewijzigd door kvdd op 06-04-2009 13:28 ]

[Bosmonster]

Ik snap uberhaupt niet waarom je zo ingewikkeld doet. Je gebruikt jQuery UI die je alle draggable- en droppable functionaliteit geeft, ook de coordinaten en elementen.

(hmm.. zeg dit wel erg vaak de laatste tijd)

[kvdd]

Bosmonster schreef op maandag 06 april 2009 @ 15:16:
Ik snap uberhaupt niet waarom je zo ingewikkeld doet. Je gebruikt jQuery UI die je alle draggable- en droppable functionaliteit geeft, ook de coordinaten en elementen.

(hmm.. zeg dit wel erg vaak de laatste tijd)

Misschien even de start post doorlezen:

Waarom maak je dan niet ook honderden jQuery droppables?
Omdat dat een enorm performance probleem geeft, je kan dan amper rond draggen met een draggable, of je processor staat op full load. Is dan helemaal niet mee te werken zeg maar.

Als je de source ook bekijkt, zie je dat het gaat over honderden draggables, wat een C2D @ 2.4 Ghz nog nekt

[BtM909]

kvdd schreef op maandag 06 april 2009 @ 12:32:
Edit:
Oplossing gevonden:
Het is nu verholpen d.m.v. elementFromPoint(e.clientX-6, e.clientY).parentNode.id

Heb ik hier nu dagen, verspreid over enkele weken naar lopen zoeken??

Zal vast een marging, padding of offset van een element zijn

---

kvdd schreef op dinsdag 07 april 2009 @ 09:05:
[...]

Misschien even de start post doorlezen:
[...]
Waarom maak je dan niet ook honderden jQuery droppables?
Omdat dat een enorm performance probleem geeft, je kan dan amper rond draggen met een draggable, of je processor staat op full load. Is dan helemaal niet mee te werken zeg maar
[...]

Je hoeft toch ook geen honderden droppables te maken?

[Bosmonster]

kvdd schreef op dinsdag 07 april 2009 @ 09:05:
[...]

Misschien even de start post doorlezen:
[...]


Als je de source ook bekijkt, zie je dat het gaat over honderden draggables, wat een C2D @ 2.4 Ghz nog nekt

Ik heb de startpost gewoon gelezen, bijdehand.

Misschien even buiten het doosje denken ipv 'honderden draggable en honderden droppables'.

Sowieso een beetje de vraag wat je daar in hemelsnaam mee van plan bent.. het voornaamste probleem lijkt me te zitten in je interaction design.

Maar ook dat zeg ik te vaak.. symptoombestrijding in plaats van probleemoplossing als er niet daadwerkelijk verteld wordt wat TS je nu eigenlijk ECHT wil.

[kvdd]

Ik weet niet of je ook de source hebt gedownload, dan heb je er een beter idee van waar het over gaat. Ik zeg niet dat mijn code perfect is, ik heb nog aangegeven op welk niveau ik denk te zitten met JavaScript.

Verder, het is een planningsite, dat had ik inderdaad wel even aan kunnen geven. Elk planitem moet naar de andere dag verplaatst kunnen worden (wat duidelijk zou zijn als de source gedownload was). En in dat verplaatsen zat dus het probleem.

@Bosmonster, ipv rantlike bezig te zijn, kun je ook gewoon suggesties ter verbetering aandragen. Als je ervaring hebt met JS, PHP, etc. draag dan ook je suggesties aan, je maakt mij niet wijs dat nu niet duidelijk is wat ik met dit programma wil. Nogmaals, de source gedownload?

Nog even @BtM909:

BtM909 schreef op dinsdag 07 april 2009 @ 09:21:
[...]

Zal vast een marging, padding of offset van een element zijn

Nou, volgens mij in dit geval niet, hij kijkt zeg maar op de muispositie tijdens het slepen. En dan zietie blijkbaar het versleepte element zelf. Dus laat ik em nu 6 pixels naar links kijken.

---

[...]

Je hoeft toch ook geen honderden droppables te maken?

Zoals het nu opgelost is niet, maar normaal gesproken wel. Elk planitem is in feite een draggable, en een droppable. Ze moeten kunnen draggen, en er moet een draggable op gedropt kunnen worden.

[ Voor 32% gewijzigd door kvdd op 07-04-2009 09:58 ]

[Bosmonster]

kvdd schreef op dinsdag 07 april 2009 @ 09:51:
@Bosmonster, ipv rantlike bezig te zijn, kun je ook gewoon suggesties ter verbetering aandragen. Als je ervaring hebt met JS, PHP, etc. draag dan ook je suggesties aan, je maakt mij niet wijs dat nu niet duidelijk is wat ik met dit programma wil. Nogmaals, de source gedownload?

Heb je er bijvoorbeeld al eens aan gedacht elementen on demand draggable/droppable te maken ipv in 1x ieder elementje uit je planning?

Daarnaast, waarom gebruik je geen table? Dit is toch duidelijk tabulaire data.

Als laatste. Waarom die inline javascript na ieder elementje? Zo kan ik me voorstellen dat enige performance ver te zoeken is. Voeg de eigenschappen en events toe ondocumentready via jQuery zoals het bedoeld is.

[ Voor 21% gewijzigd door Bosmonster op 07-04-2009 10:13 ]

[crisp]

Bosmonster schreef op dinsdag 07 april 2009 @ 09:43:
[...]


Ik heb de startpost gewoon gelezen, bijdehand.

Misschien even buiten het doosje denken ipv 'honderden draggable en honderden droppables'.

Sowieso een beetje de vraag wat je daar in hemelsnaam mee van plan bent.. het voornaamste probleem lijkt me te zitten in je interaction design.

Maar ook dat zeg ik te vaak.. symptoombestrijding in plaats van probleemoplossing als er niet daadwerkelijk verteld wordt wat TS je nu eigenlijk ECHT wil.

Topicstarter doet gewoon event-delegation, een bekend design-pattern en iets dat de standaard jQuery draggable blijkbaar niet doet en ws voor elk element een aparte handler aanmaakt. Een typisch voorbeeld dat de beperkingen van libraries laat zien...

[Bosmonster]

crisp schreef op dinsdag 07 april 2009 @ 10:16:
[...]

Topicstarter doet gewoon event-delegation, een bekend design-pattern en iets dat de standaard jQuery draggable blijkbaar niet doet en ws voor elk element een aparte handler aanmaakt. Een typisch voorbeeld dat de beperkingen van libraries laat zien...

Ehm... waar in de TS z'n code zie jij event-delegation terugkomen? Want jQuery ondersteunt dit sinds 1.3 prima (al kan ik me voorstellen dat de UI-addon nog niet volledig compatible is, aangezien deze niet door de jQuery developers wordt onderhouden).

Echter, zoals ik al zei, ik zie het nergens terugkomen. Wat ik zie na iedere draggable is:

code:

<script type="text/javascript">
createDrag('1_1229900400_8_136');
</script>

Wat wel een hele aparte manier is om al je 'honderden' elementen draggable te maken


Daarnaast snap ik niet wat je bedoelt met dat dat een typisch voorbeeld is van de beperkingen van libraries? Zoals gezegd ondersteunt jQuery Event Delegation sinds 1.3.

[ Voor 15% gewijzigd door Bosmonster op 07-04-2009 10:25 ]

[crisp]

Bosmonster schreef op dinsdag 07 april 2009 @ 10:22:
[...]


Ehm... waar in de TS z'n code zie jij event-delegation terugkomen?

Dat maak ik op uit de topicstart, dus (toegeven) dat is een aanname.

Want jQuery ondersteunt dit sinds 1.3 prima (al kan ik me voorstellen dat de UI-addon nog niet volledig compatible is, aangezien deze niet door de jQuery developers wordt onderhouden).

Maar als de UI-addon daar geen gebruik van maakt (eveneens een aanname, maar dat viel uit mijn bewoordingen wel op te maken) dan is dat een beperking in het geval je met veel draggables te maken hebt; veel event-handlers werken immers vertragend.

Echter, zoals ik al zei, ik zie het nergens terugkomen. Wat ik zie na iedere draggable is:

code:

<script type="text/javascript">
createDrag('1_1229900400_8_136');
</script>

Wat wel een hele aparte manier is om al je 'honderden' elementen draggable te maken

True; beter kan je ze dan in de markup al 'taggen' met een speciale class oid.

Daarnaast snap ik niet wat je bedoelt met dat dat een typisch voorbeeld is van de beperkingen van libraries? Zoals gezegd ondersteunt jQuery Event Delegation sinds 1.3.

Nogmaals: als het aanmaken van veel draggables performance-problemen oplevert dan is dat een beperking waar je omheen moet werken. Dat je daarvoor andere functionaliteit van dezelfde library kan gebruiken is mooi, maar vereist vaak wel extra kennis.

[kvdd]

Bosmonster schreef op dinsdag 07 april 2009 @ 10:07:

Heb je er bijvoorbeeld al eens aan gedacht elementen on demand draggable/droppable te maken ipv in 1x ieder elementje uit je planning?

Ja, daar heb ik over contact gehad met jQuery mensjes en die gaven me de volgende tip, draggables gewoon aanmaken, 1 megadroppable en bepalen op muislocatie op welk element gedropt wordt.

Daarnaast, waarom gebruik je geen table? Dit is toch duidelijk tabulaire data.

Dus:

HTML:

<table>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

Dat zou sneller kunnen zijn, ik zal het meenemen.

Als laatste. Waarom die inline javascript na ieder elementje? Zo kan ik me voorstellen dat enige performance ver te zoeken is. Voeg de eigenschappen en events toe ondocumentready via jQuery zoals het bedoeld is.

Dank voor de tip! Geen idee hoe het werkt, maar lijkt me dat die inline javascript inderdaad langzamer werken.
Is het geen idee om een forloop te maken die de elementen met de class 'uur' opzoeken, en daar een draggable van maken? (worden ze wel alsnog bij pagina creatie gemaakt, wat best wat CPU power vraagt.)

Bosmonster schreef op dinsdag 07 april 2009 @ 10:22:
[...]
Echter, zoals ik al zei, ik zie het nergens terugkomen. Wat ik zie na iedere draggable is:

code:

<script type="text/javascript">
createDrag('1_1229900400_8_136');
</script>

Om verder in te gaan op het maken van een draggable als die gemaakt moet worden:
- Dit heb ik geprobeerd, door een onmousedown event, maar helaas wil dat niet werken. Dan moet ik twee keer klikken voordat de draggable de muis volgt.

Tot zover aan hints:
- Gebruik van onreadydocument van jQuery voor het toekennen van eigenschappen en events i.p.v. inline JavaScript
- Gebruik van tabel i.p.v. <div><div></div><div></div></div> etc.


Ik merk overigens dat het gebruik van 1 droppable en meerdere draggables wel als een goed idee wordt gezien.

crisp schreef op dinsdag 07 april 2009 @ 10:32:
[...]

Nogmaals: als het aanmaken van veel draggables performance-problemen oplevert dan is dat een beperking waar je omheen moet werken. Dat je daarvoor andere functionaliteit van dezelfde library kan gebruiken is mooi, maar vereist vaak wel extra kennis.

Heb je enig idee hoe je daaromheen werkt? Na wat libs geprobeerd te hebben ben ik op jQuery uitgekomen. Met Scriptaculous had ik bijvoorbeeld problemen om met een draggable door een pagina te scrollen.

[ Voor 50% gewijzigd door kvdd op 07-04-2009 10:59 ]

[BtM909]

kvdd schreef op dinsdag 07 april 2009 @ 10:41:
[...]

Om verder in te gaan op het maken van een draggable als die gemaakt moet worden:
- Dit heb ik geprobeerd, door een onmousedown event, maar helaas wil dat niet werken. Dan moet ik twee keer klikken voordat de draggable de muis volgt.

Waarom kaart je dat dan niet als probleem aan

Laat eens wat code zien waarbij je dat probeert. Het hoeft dus geen 100-en draggables te zijn. Begin met 2 en toon wat code waarmee je dat hebt geprobeerd. Als ik namelijk ga [google=jquery add dragevent when mousedown] dan vind ik al direct een waarschijnlijk 90% werkende link

[Bosmonster]

crisp schreef op dinsdag 07 april 2009 @ 10:32:
Dat maak ik op uit de topicstart, dus (toegeven) dat is een aanname.

Nou bij deze dan, er wordt geen gebruik van gemaakt.

Nogmaals: als het aanmaken van veel draggables performance-problemen oplevert dan is dat een beperking waar je omheen moet werken. Dat je daarvoor andere functionaliteit van dezelfde library kan gebruiken is mooi, maar vereist vaak wel extra kennis.

Mjah.. In dit geval ligt het probleem niet bij de library. jQuery geeft je slechts de toolset, zoals xbrowser event-handling en event-delegation, razendsnelle selector engine, etc.

Het is de UI-addon die niet altijd even lekker in elkaar zit, maar die schuld kun je imho niet bij de library leggen.

Je zou ook zelf een eenvoudige drag/drop functionaliteit middels jQuery kunnen bouwen zonder gebruik te maken van de nogal bloated UI-addon, maar dat vereist inderdaad wel iets meer kennis (en tijd natuurlijk).

[kvdd]

BtM909 schreef op dinsdag 07 april 2009 @ 11:07:
[...]

Waarom kaart je dat dan niet als probleem aan

Omdat ik ervanuit ging dat het niet beter opgelost kon worden

Laat eens wat code zien waarbij je dat probeert. Het hoeft dus geen 100-en draggables te zijn. Begin met 2 en toon wat code waarmee je dat hebt geprobeerd. Als ik namelijk ga [google=jquery add dragevent when mousedown] dan vind ik al direct een waarschijnlijk 90% werkende link

Volg ik jou link, dan kom ik hierop uit:

JavaScript:

The code looks like this :  (using jQuery 1.2.3 and jQuery UI 1.5b ) 


$( "#coveringElement").mousedown( function( event ){ 
    $("#draggable").trigger("mousedown.draggable", [event]) 



} ) 


( where $("#draggable").draggable() has been initialized earlier... ) 

Hope this can help ! :-) 

Vooral die eennalaatste zin, doet de deur weer dicht

[crisp]

Bosmonster schreef op dinsdag 07 april 2009 @ 11:40:
[...]


Nou bij deze dan, er wordt geen gebruik van gemaakt.

Dat maak ik nu inderdaad ook op uit kvdd in "[JavaScript] Drag en elementFromPoint fout"

Daar zit dus nog een hoop ruimte voor verbetering door ook voor het targetten van je draggables event delegation te gebruiken

[...]
Je zou ook zelf een eenvoudige drag/drop functionaliteit middels jQuery kunnen bouwen zonder gebruik te maken van de nogal bloated UI-addon, maar dat vereist inderdaad wel iets meer kennis (en tijd natuurlijk).

Dat laatste is dan zeker een feit

[Bosmonster]

http://groups.google.com/...ad/bec7dba6705040fc?pli=1

Hier staat een hoop uitgelegd volgens mij. O.a. hoe je draggables onmousedown draggable kunt maken. En tevens dat je honderden droppables middels event-delegation performant kunt houden.

Al kan ik me voorstellen dat ook het draggable via event-delegation een stuk performanter te krijgen is. Heb helaas alleen even geen tijd momenteel om een voorbeeld te knutselen.

[ Voor 27% gewijzigd door Bosmonster op 07-04-2009 11:53 ]

[kvdd]

crisp schreef op dinsdag 07 april 2009 @ 11:49:
[...]
Daar zit dus nog een hoop ruimte voor verbetering door ook voor het targetten van je draggables event delegation te gebruiken

Ik kan inderdaad even aan de gang met de door jullie genoemde verbeteringen.

Bosmonster schreef op dinsdag 07 april 2009 @ 11:50:
http://groups.google.com/...ad/bec7dba6705040fc?pli=1

Hier staat een hoop uitgelegd volgens mij. O.a. hoe je draggables onmousedown draggable kunt maken. En tevens dat je honderden droppables middels event-delegation performant kunt houden.

Al kan ik me voorstellen dat ook het draggable via event-delegation een stuk performanter te krijgen is. Heb helaas alleen even geen tijd momenteel om een voorbeeld te knutselen.

Dit topic heb ik ook onder ogen gehad, en in zn geheel doorgewerkt, daardoor en andere, ben ik op het idee gebracht de elementFromPoint te gebruiken. Helaas voor zover ik nu heb gevonden is het niet mogelijk om een draggable op een mousedown te creëren en de cursor te laten volgen. Want alleen dat laatste is het probleem. Het aanmaken van de draggable kan wel.
Zie: http://groups.google.com/...c2ad24c?#d7fff548bc2ad24c

Als het inderdaad mogelijk is een draggable na de mousedown als draggable te laten functioneren, ik hou me aanbevolen