# Bytte plass på divs med jQuery?

**URL:** <http://webforumet.no/t/bytte-plass-pa-divs-med-jquery/15254>\
**Category:** Webutvikling\
**Tags:** javascriptajax\
**Created:** [mai 22, 2012, 1:07pm UTC](http://webforumet.no/t/bytte-plass-pa-divs-med-jquery/15254 "2012-05-22T13:07:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![clinton4](http://webforumet.no/letter_avatar_proxy/v4/letter/c/dbc845/32.png) [@clinton4](http://webforumet.no/u/clinton4)\
**Post date:** [mai 22, 2012, 1:07pm UTC](http://webforumet.no/t/bytte-plass-pa-divs-med-jquery/15254/1 "2012-05-22T13:07:42Z")

</div>

Hei,

La oss si at jeg har følgende html struktur:

[HTML]

content

content

content

content

content

[/HTML]

Hvordan kan jeg tillate at widget i size1 kan bytte plass med andre widget i en annen size1 beholder.

Noen regler:

1. size1 kan kun inneholde 1 widget.
2. Brukeren skal kunne bruke drag and drop for å bytte plass.

Noen her som er stødig på jQuery og kan vise meg hvordan jeg oppnår dette? Jeg kan gjerne betale en slant for løsningen.

---

<div class="post-metadata">

**Author:** ![adeneo](http://webforumet.no/letter_avatar_proxy/v4/letter/a/258eb7/32.png) [@adeneo](http://webforumet.no/u/adeneo)\
**Post date:** [mai 22, 2012, 4:33pm UTC](http://webforumet.no/t/bytte-plass-pa-divs-med-jquery/15254/2 "2012-05-22T16:33:46Z")

</div>

Tja, litt kan jeg vel alltids hjelpe deg på vei.

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.

kjapt eksempel : [Edit this Fiddle - jsFiddle](http://jsfiddle.net/adeneo/kwJ87/2/)

---

<div class="post-metadata">

**Author:** ![clinton4](http://webforumet.no/letter_avatar_proxy/v4/letter/c/dbc845/32.png) [@clinton4](http://webforumet.no/u/clinton4)\
**Post date:** [mai 22, 2012, 9:46pm UTC](http://webforumet.no/t/bytte-plass-pa-divs-med-jquery/15254/3 "2012-05-22T21:46:48Z")

</div>

Takk for den adeneo, nå er jeg hvertfall på vei et sted 🙂

Har dog noen spørsmål til:

1. Hvordan kan jeg begrense size1 og size2 til å kun tillate 1 stk widget inni seg?

2. Dersom jeg plasserer en widget over en size1 som allerede inneholder en widget, så skal disse to bytte plass, hvordan løser jeg dette?

3. 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?

Den nye html strukturen vil da bli slik:

[HTML]

  

content

content

content

content

content

[/HTML]

---

<div class="post-metadata">

**Author:** ![adeneo](http://webforumet.no/letter_avatar_proxy/v4/letter/a/258eb7/32.png) [@adeneo](http://webforumet.no/u/adeneo)\
**Post date:** [mai 23, 2012, 12:49am UTC](http://webforumet.no/t/bytte-plass-pa-divs-med-jquery/15254/4 "2012-05-23T00:49:41Z")

</div>

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!](http://mjsarfatti.com/sandbox/nestedSortable/)

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](http://jsfiddle.net/adeneo/kwJ87/3/)