Drag drop upload jQuery, waar gedropt?

[GWTommy]

Ik ben bezig met een simpele omgeving om fotoalbums te beheren. Hiervoor gebruik ik deze drag en drop file upload plugin. Werkt perfect. Echter heb ik het mezelf weer te moeilijk gemaakt. Ik wil namelijk dat als een foto of meerdere foto's op een album gedropt worden, ze toegevoegd worden aan het betreffende album en wanneer ze ergens anders op de pagina gedropt worden, er een nieuw album wordt gemaakt voor de foto's.

In eerste instantie leek me dit heel gemakkelijk te bereiken, maar goed, ik roep nu niet voor niets jullie hulp in. Wat is het probleem? Als je bestanden over de pagina dragt, dan worden events zoals hover en mousemove niet getriggerd. Er is dus geen mogelijkheid (voor zover ik heb kunnen vinden) om de positie van de muis te volgen. Daarnaast wordt bijv. pageX en pageY niet meegegeven bij het drop event dat wordt meegegeven. Ook heb ik gedacht aan meerdere dropareas. Dus elk album zijn eigen droparea en nog een globale over de hele pagina. Helaas wordt dan altijd die globale getriggerd, ook bij het droppen op een album.

Is er een mogelijkheid om deze tekortkoming aan de kant te zetten?
Wat ik eventueel kan doen, is vlak ná het droppen, de muispositie uitlezen, maar dat wordt onnauwkeurig heb ik het idee. Daarom ben ik op zoek naar een betere, waterdichte oplossing.

Verder qua code is het niets speciaals. Ik gebruik gewoon vrijwel de basis:

JavaScript:

    $("#fileupload").fileupload({
        dataType: 'json',
        singleFileUploads: false,
        done: ...
    });

[MueR]

De makkelijkste oplossing is een blokje maken met "Creer nieuw album" om je nieuwe album functionaliteit af te vangen, dan is je probleem opgelost.

[GWTommy]

Ja dat is natuurlijk heel gemakkelijk. Maar: waarom makkelijk doen als het ook moeilijk kan?
Helaas ben ik te koppig om dit idee nu nog te laten gaan!

[posttoast]

@GWTommy: ik kan je wel een reden geven om makkelijk te doen als het ook moeilijk kan. Ik vind het idee van MueR vele malen duidelijker en gebruiksvriendelijker

[OkkE]

MueR zijn oplossing is simpel, gebruiksvriendelijk en een stuk minder fout gevoelig; ik zou dus niet weten waarom je het niet op die manier zou willen doen...

[MueR]

GWTommy schreef op woensdag 05 september 2012 @ 13:37:
Ja dat is natuurlijk heel gemakkelijk. Maar: waarom makkelijk doen als het ook moeilijk kan?
Helaas ben ik te koppig om dit idee nu nog te laten gaan!

Dan hoop ik dat het voor jezelf is en niet voor een klant Ik zou je de wind van voren geven als je dit bij ons in het bedrijf ging doen namelijk.

[418O2]

GWTommy schreef op woensdag 05 september 2012 @ 13:37:
Ja dat is natuurlijk heel gemakkelijk. Maar: waarom makkelijk doen als het ook moeilijk kan?
Helaas ben ik te koppig om dit idee nu nog te laten gaan!

dat is an sich prima, maar als ik je nivo zo moet inschatten ga je het jezelf te moeilijk maken. Ik zou zoiets zo inelkaar schroeven, maar jQuery spreek ik dan ook vloeiend

je moet na de upload async dingen gaan updaten, maar als je niet verder komt dan het toepassen van een plugin wordt dat te moeilijk gok ik.

[Rickets]

Wat een conservatieve reacties. Zo komt het internet nooit vooruit. Misschien heeft GWTommy een interface ontworpen die hartstikke eenvoudig is te gebruiken, en die de standaard wordt voor alle toekomstige drag-en-drop-implementaties.

GWTommy schreef op woensdag 5 september 13:30
Is er een mogelijkheid om deze tekortkoming aan de kant te zetten?
Wat ik eventueel kan doen, is vlak ná het droppen, de muispositie uitlezen, maar dat wordt onnauwkeurig heb ik het idee. Daarom ben ik op zoek naar een betere, waterdichte oplossing.

Ook heb ik gedacht aan meerdere dropareas. Dus elk album zijn eigen droparea en nog een globale over de hele pagina. Helaas wordt dan altijd die globale getriggerd, ook bij het droppen op een album.

Wat je kan doen, is 1 drop-handler gebruiken voor zowel de hele pagina als specifieke albums, en binnen die handler uitzoeken waar het event vandaan komt. Je kan bijvoorbeeld je albums een attribuut data-album geven met als value het ID van het betreffende album. Binnen je handler kijk je dan of dat attribuut aanwezig is. Zo ja, dan is het een drop in een bestaand album. Zo nee, dan moet je een nieuw album aanmaken. Zie bijvoorbeeld: http://jsfiddle.net/3MyZz/

Hoe je dat regelt in combinatie met de plugin die je gebruikt, is iets dat je zelf zal moeten uitzoeken. Ik hoop dat je wat aan mijn suggestie hebt.

[GWTommy]

Rickets schreef op woensdag 05 september 2012 @ 15:11:
Wat een conservatieve reacties. Zo komt het internet nooit vooruit. Misschien heeft GWTommy een interface ontworpen die hartstikke eenvoudig is te gebruiken, en die de standaard wordt voor alle toekomstige drag-en-drop-implementaties.


[...]

Wat je kan doen, is 1 drop-handler gebruiken voor zowel de hele pagina als specifieke albums, en binnen die handler uitzoeken waar het event vandaan komt. Je kan bijvoorbeeld je albums een attribuut data-album geven met als value het ID van het betreffende album. Binnen je handler kijk je dan of dat attribuut aanwezig is. Zo ja, dan is het een drop in een bestaand album. Zo nee, dan moet je een nieuw album aanmaken. Zie bijvoorbeeld: http://jsfiddle.net/3MyZz/

Hoe je dat regelt in combinatie met de plugin die je gebruikt, is iets dat je zelf zal moeten uitzoeken. Ik hoop dat je wat aan mijn suggestie hebt.

@Rickets: als eerste wil ik jou bedanken. Jij hebt mij de truc laten zien. Ik heb ook zitten spelen met handlers hangen achter drop en dragover, echter heb ik die puur toegepast op de album elementen. Ik heb er niet aan gedacht om dit op document te doen en vervolgens het event target te zoeken, de werkelijk dropzone dus, in dit geval een album. Bedankt voor deze geweldige uitleg door middel van een voorbeeld! Hiermee gaat het zeker lukken.

Overigens deel ik je mening in je eerste alinea. De weinige informatie die ik heb gegeven wil niks zeggen over hoe het uiteindelijk verwerkt gaat worden. Erg jammer dat er altijd van zulk soort nutteloze reacties komen. Als ik vraag hoe ik dit opgelost krijg, vraag ik om een antwoord daar op, en niet om hoe het makkelijker kan. Misschien is dat wel wat er mis is met de software industrie, gemak gaat lang niet altijd boven functionaliteit tegenwoordig.

@MueR: nogmaals, met zo weinig informatie al de wind van voren. Klinkt als een kort lontje en niet open staan voor nieuwe ideeën. Ik zou niet graag 'bij jullie in het bedrijf' willen werken, totaal geen innovatie. A/w: het is een onderdeel van een applicatie die enkele vrienden van mij gaan gebruiken om wat zaken te beheren. Ze studeren HBO informatica, dus zullen ze, na de handleiding gelezen te hebben en de tooltip gezien te hebben, echt wel snappen waar ze moeten droppen.

@Catch22: jouw reactie vind ik nog wel het mooiste. Jij kunt mijn nivEAU inschatten na welgeteld 14 regels tekst en 5 regels code die ik letterlijk heb gekopieerd uit de docs van de plugin? +1 voor jou. Werkelijk. Overigens, de plugin is gewoon vreselijk handig. Een drag drop upload feature schrijven kan iedere kinderziel, maar waarom zou ik het wiel twee keer uitvinden, ik heb immers al een fiets. In ieder geval bedankt dat jij de moeite hebt genomen om mijn nivEAU in te schatten. Oh nog een puntje, hoe weet jij hoe ik mijn upload verder afhandel? Ik heb alleen verteld hoe het droppen in zijn werk zal gaan. Volgens mij ben jij helderziende (althans, een slechte). Je hebt in ieder geval mijn dag goed gemaakt, ik heb dubbel gelegen.

[418O2]

Er zijn genoeg voorbeelden van drag and drop met jQuery. Je moet de fotos draggable maken en de folders droppable. Je kan met jQuery afvangen wanneer een draggable element op een droppable zone komt.

Als je bij het onDrop event van een draggable element afvangt of hij op een droppable element zit (een folder dus), of niet, dan kan je van daaruit verder redeneren.

Droppable en Draggable zijn standaard jQuery UI tools trouwens.

http://jqueryui.com/demos/droppable/
http://jqueryui.com/demos/draggable/

en als ik jou was, zou ik mijn toon iets matigen. Je komt aan met een incomplete topicstart waarin je niet echt bepaald laat zien onderlegd te zijn met kennis van javascript en ook niet laat zien wat je zelf al hebt gevonden. Als je daarbij alleen maar 1 standaard plugin gebruikt, geef je niet echt een signaal af dat je zelf veel JS kennis hebt.

[ Voor 25% gewijzigd door 418O2 op 05-09-2012 16:07 ]