mainīt div secību

[gunmetal]

šodien labu laiciņu meklēju, kā neatjaunojot lapu var mainīt div secību. nu tas laikam ir iespējams tikai ar javascript palīdzību.

 

Domu cerēsim, ka sapratāt

Piespiež uz bultiņas un paceļ augšā bēdīgo sejiņu.

Man slikti iet ar skaidrošanu tāpēc attēloju attēlā..

Edited January 2, 2012 by gunmetal

[Kemito]

Ja vēlies blokus "iestatīti" mainīt, tad noteikti katra bloka pozīcija būs jaglabā datubāzē, attiecīgi vadoties pēc kārtas nummura un pozīcijas lapā. Un tālāk jau aiziet cikls, cik tev tie paneļi ir, vai arī ja ir kontstantes vērtības paneļi, tad iztiec arī bez cikla.

Ja vēlies tikai klienta pusē mainīt uz esošo momentu, tīrākā spēle ar JQuery.

Kurš variants tev der? Sāc taisīt un domājams pie kādas nezināšanas vietas, tev paskaidros sīkāk.

[codez]

Ar jquery to ir ļoti viegli izdarīt:

http://jsfiddle.net/RZtwk/

 

js:

$('body').delegate('.btn_up','click',function(){
var $t=$(this).parent();
$t.insertBefore($t.prev());
}).delegate('.btn_down','click',function(){
var $t=$(this).parent();
$t.insertAfter($t.next());
});

 

html:

<div class="row">1.A <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">2.B <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">3.C <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">4.D <button class="btn_up">up</button><button class="btn_down">down</button></div>

[gunmetal]

Ar jquery to ir ļoti viegli izdarīt:

http://jsfiddle.net/RZtwk/

 

js:

$('body').delegate('.btn_up','click',function(){
var $t=$(this).parent();
$t.insertBefore($t.prev());
}).delegate('.btn_down','click',function(){
var $t=$(this).parent();
$t.insertAfter($t.next());
});

 

html:

<div class="row">1.A <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">2.B <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">3.C <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">4.D <button class="btn_up">up</button><button class="btn_down">down</button></div>

Tajā linkā kur aizsūtīji viss darbojas ideāli un tieši kā vajag tikai kāpēc kad visu pārkopēju nekas nedarbojas?

[gunmetal]

Ai nu paldies tiem, kas atbildēja. Es varbūt iztikšu bez un uztaisīšu savu domu savādāk ;)

[briedis]

Codez iedeva normālu kodu, kur pamatā ir 4 rindiņas, un tu nevari pakustināt pelēko vielu, lai pielāgotu savām vajadzībām? :)

[Kemito]

Pačekoju, viss super no codez puses, protams, pēc lapas pārlādes tas vairs nebūs spēkā, kā jau minēju, tad nāksies pozīcijas kaut kur glabāt.

[daGrevis]

> Tajā linkā kur aizsūtīji viss darbojas ideāli un tieši kā vajag tikai kāpēc kad visu pārkopēju nekas nedarbojas?

 

Vai tev ir jQuery libs?

[briedis]

Nevar jau saprast, varbūt gunmetal domā, ka ar codez piemēru viss automātiski/maģiski notiek un viss tiek saglabāts DB, atkārtoti ejot lapā visas izmaiņas tiek automātiski attēlotas... :)

[gunmetal]

Labi, labi pietiek ņirgāties! :D

Es ievietoju mājas lapā kodu un tas nedarbojas.

<script>
$('body').delegate('.btn_up','click',function(){
   	var $t=$(this).parent();
   	$t.insertBefore($t.prev());
}).delegate('.btn_down','click',function(){
   	var $t=$(this).parent();
   	$t.insertAfter($t.next());
});
</script>
<div class="row">1.A <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">2.B <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">3.C <button class="btn_up">up</button><button class="btn_down">down</button></div>
<div class="row">4.D <button class="btn_up">up</button><button class="btn_down">down</button></div>

Un P.S es nevienā brīdī neteicu, ka man Db ir jāsaglabā secība, man wnk vajadzēja lai mainās secība un viss.

Edited January 3, 2012 by gunmetal

[codez]

jquery bibliotēka ir?

body tags ir?

 

 

P.S. Galu galā var taču arī no jsfiddle tam demo ifreimam paņemt view source un paskatīties pilnu sourci.

Edited January 4, 2012 by codez