Bytte plass på divs med jQuery?

[clinton4]

Hei,

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

<div class="size1">
     <div class="widget">content</div>
</div>

<div class="size2">
     <div class="widget">content</div>
</div>

<div class="size1">
     <div class="widget">content</div>
</div>

<div class="size2">
     <div class="widget">content</div>
</div>

<div class="size1">
     <div class="widget">content</div>
</div>

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.

 

[adeneo]

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

 

[clinton4]

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:

<div class="size1">
     <div id="widget_a" class="widget">content</div>
</div>

<div class="size2">
     <div id="widget_b" class="widget">content</div>
</div>

<div class="size1">
     <div id="widget_c" class="widget">content</div>
</div>

<div class="size2">
     <div id="widget_d" class="widget">content</div>
</div>

<div class="size1">
     <div id="widget_e" class="widget">content</div>
</div>

 

[adeneo]

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å) :

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 
});

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