[jQuery] Drag & Drop floorplanner

[Raem]

Hoi,
Ik ben bezig met een floorplanner (inrichten van huiskamer) te maken met behulp van jQuery. Hierbij wil ik gebruik maken van drag & drop.
De bedoeling is dat je links van je scherm je meubels hebt die je vervolgens in een div (de woonkamer) kunt slepen. Het gesleepte meubel moet als het ware gekopieerd worden omdat je hetzelfde meubel nog een keer zou moeten kunnen plaatsen.

Nu zijn er genoeg drag and drop scripts te vinden op internet maar niks wat ik precies zoek. Ik heb al verschillende scripts geprobeerd te combineren, maar loop steeds tegen verschillende fouten aan of dingen die niet goed samen werken.

Weet iemand toevallig waar zo'n script of een tutorial voor zo'n script of iets dergelijks te vinden is?
Wat ik dus eigenlijk zoek is het slepen (lees kopieren) van een afbeelding in een div waar ik vervolgens die afbeelding in die div weer kan verplaatsen.

Geen scriptrequests graag

[ Voor 11% gewijzigd door André op 18-06-2009 10:33 ]

[André]

Waarom staat er in je titel "jQuery"? Heb je het daar al mee geprobeerd? Wat lukt er niet, of wat voldeed niet aan je wensen?

Het klinkt een beetje of het 1 van je eerste projecten is, en dat is dan ook direct wel een pittige waar geen op-maat script voor is. Je zult het dus met behulp van bijvoorbeeld jQuery zelf moeten ontwikkelen.

[Bosmonster]

Dit is toch eenvoudig zelf te scripten in combinatie met de standaard jQuery drag/drop functionaliteit?

Wat heb je in dit opzicht zelf al geprobeerd, dus zelf geprobeerd te schrijven (dus niet het combineren van wat bestaande meuk) ?

[zwippie]

Zie het voorbeeld in de jQuery docs:

JavaScript:

$("#draggable").draggable();
$("#droppable").droppable({
  drop: function() { alert('dropped'); }
});

Hier kun je alert('dropped') vervangen door een stukje code dat de img in je draggable kopieert naar je droppable. Dan zal het vast nog niet helemaal perfect gaan, maar kun je in ieder geval wat meer specifieke vragen gaan stellen.

[Bosmonster]

zwippie schreef op donderdag 18 juni 2009 @ 10:40:
Zie het voorbeeld in de jQuery docs:

JavaScript:

$("#draggable").draggable();
$("#droppable").droppable({
  drop: function() { alert('dropped'); }
});

Hier kun je alert('dropped') vervangen door een stukje code dat de img in je draggable kopieert naar je droppable. Dan zal het vast nog niet helemaal perfect gaan, maar kun je in ieder geval wat meer specifieke vragen gaan stellen.

Ik zou hem eerder al kopieren als je begint met draggen. Dat doe je waarschijnlijk toch al voor een ghost-variant tijdens het draggen.

[418O2]

{ helper: clone }

dit heb ik als een van de eerste dingen met JQ gemaakt, is veel over te vinden

[Stalkert]

Je kan ook eens naar extjs kijken. Dit is ook wel een mooie JS-library waarin je zeker kan drag 'n droppen.
Weet niet of het precies is wat je wilt

[Bosmonster]

Stalkert schreef op vrijdag 19 juni 2009 @ 20:33:
Je kan ook eens naar extjs kijken. Dit is ook wel een mooie JS-library waarin je zeker kan drag 'n droppen.
Weet niet of het precies is wat je wilt

- ExtJS is wel iets meer dan een JS-library. Misschien bedoel je Ext Core?
- ExtJS is niet gratis voor commercieel gebruik
- in de topic title staat toch netjes [jQuery], dus waarom uberhaupt met een andere library aankomen

M.a.w. naar ExtJS wijzen als iemand een simpele jQuery drag/drop functionaliteit vraagt is niet zo'n goed plan

[ Voor 10% gewijzigd door Bosmonster op 20-06-2009 15:00 ]

[Fuzzillogic]

Ik vraag me af of het webplatform wel echt lekker geschikt is voor een floorplanner. Zeker zonder het gebruik van Canvas (of nog logischer: SVG) kan ik me eigenlijk geen bruikbaar eindresultaat voorstellen. Daarmee vallen archaische browsers, zoals IE8, meteen af.

Oftewel: krijg niet de illusie dat omdat webtech zo makkelijk lijkt, het ook makkelijk is voor general purpose gebruik. Ik durf zelfs te beweren dat webtech slechts een beperkt toepassingsgebied kent. En het maken van een floorplan valt daar imo niet onder...

Bosmonster schreef op zaterdag 20 juni 2009 @ 14:59:
[...]
- ExtJS is niet gratis voor commercieel gebruik

ExtJS is (ook) beschikbaar met de GPLv3-licentie. (Maar géén LGPL!)

[Bosmonster]

Fuzzillogic schreef op zaterdag 20 juni 2009 @ 16:23:
ExtJS is (ook) beschikbaar met de GPLv3-licentie. (Maar géén LGPL!)

Voor commercieel gebruik kan dat inderdaad, maar dat betekent wel dat je al je (commerciele) code ook onder GPL uit moet brengen en dat zie ik niet zo snel gebeuren. Dan is een commercial license van een paar honderd dollar meestal een stuk interessanter.

[ Voor 11% gewijzigd door Bosmonster op 20-06-2009 17:21 ]

[R4gnax]

Bosmonster schreef op zaterdag 20 juni 2009 @ 17:20:
Voor commercieel gebruik kan dat inderdaad, maar dat betekent wel dat je al je (commerciele) code ook onder GPL uit moet brengen en dat zie ik niet zo snel gebeuren. Dan is een commercial license van een paar honderd dollar meestal een stuk interessanter.

Het moment waarop de js files (in compiler termen) gelinked worden vindt pas plaats in de browser v/d client. De hoster / site bouwer biedt alleen de ongewijzigde(!) library code aan ter download. Mijns inziens heeft de GPL dus eigenlijk helemaal niets te zeggen over enige server side code of andere javascript code die pas runtime in de browser v/d client gelinked wordt.

Als ik me niet vergis is dit gaatje in de GPL, wat ook wel eens bekend staat als de 'asp loophole', zelfs opzettelijk in GPL v3 blijven bestaan.

[ Voor 9% gewijzigd door R4gnax op 21-06-2009 12:59 ]

[Verwijderd]

Bij JQuerie staan de draggen/droppen voorwerpen gewoon in de html, wat de TS dus moet doen is op het moment dat hij bevestigt dat het object op een bepaalde plek wordt gedropt, een schermverversing + een extra object genereren in de html.
Als hij bijvoorbeeld met PHP of ASP werkt i.s.m. een database zou dat niet al te ingewikkeld moeten zijn.