Det enkleste er å bruke jQuery UI til dette, som har innebygde funksjoner for draggable / droppable, men akkurat her er nok sortable det du egentlig ser etter.
Takk for den adeneo, nå er jeg hvertfall på vei et sted
Har dog noen spørsmål til:
Hvordan kan jeg begrense size1 og size2 til å kun tillate 1 stk widget inni seg?
Dersom jeg plasserer en widget over en size1 som allerede inneholder en widget, så skal disse to bytte plass, hvordan løser jeg dette?
Sett at hver widget hadde sin unike id (feks: widget_a, widget_b, widget_c osv..). Dersom jeg da flytter widget_a fra size1 til en annen size1 som allerede inneholder widget_c. Hvordan kan jeg lagre disse to ide’ene (widget_a og widget_c) i en variabel?
Eksempelet ovenfor var bare en kjapp test for å vise hvordan man kanskje kunne bruke jQuery UI til noe slikt, da alle disse drag & drop greiene til dels er innebygget i enkle funksjoner der nå.
Jeg har ikke brukt jQ UI til dette før, så er usikker på akkurat hvordan man får det til med nøstede elementer slik du har der, men har gjort noe lignende i ren javascript, og det ble mange linjer med kode og mye riving i lite hår for å få det til å virke, så derfor vet jeg at det er forholdsvis mye greier og sannsynligvis mer komplisert enn du tror å få det til uten ferdige løsninger, slik som jQ UI.
Det blir litt pseudo kode, og enkle eksempler, men for å prøve å forklare litt mer så må du sannsynligvis finne ut hvilket element .widget elementet som dras ligger inne i før det flyttes, og jeg kan tenke meg noe slik som (holder oss til jQuery da det er enklere å forstå) :
[PHP]var $parent; //$parent variablen er plassert høyere, og er tilgjengelig i begge funksjonene
$(‘.widget’).on(‘mousedown’, function() { // i det museknappen trykkes ned
$parent = $(this).parent(); // finn foreldre elementet til elementet som skal dras
});
$(‘.widget’).on(‘drop’, function() { // når elementet slippes ett nytt sted
$(this).siblings().appendTo($parent); // flytt alle søsken elementer over i den opprinnelige mappen
});[/PHP]
Brukte noen minutter etter jeg skrev det ovenfor og fant en plugin som kan sortere nøstede elementer her!
Rotet også litt mer med jQuery UI, og kom omtrent så langt som dette før det var laangt over min leggetid : Edit this Fiddle - jsFiddle