Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <div class="blok"> <div class="blok_nazev">Výpis sekcí </div> <div class="sloupec_nazev" style="width: 60px;">ID sekce</div> <div class="sloupec_nazev" style="width: 280px;">Název sekce</div> <div class="sloupec_nazev" style="width: 280px;">Text</div> <div class="sloupec_nazev" style="width: 40px;">Pořadí</div> <br> <div id="blok_obsah"> <div class="radek"> <div class="sloupec_obsah sloupec_id" style="width: 60px;" >1</div> <div class="sloupec_obsah" style="width: 280px;">1-nazev</div> <div class="sloupec_obsah" style="width: 280px;">1-text</div> <div class="sloupec_obsah" style="width: 40px;">1-poradi</div> </div> <div class="radek"> <div class="sloupec_obsah sloupec_id" style="width: 60px;" >2</div> <div class="sloupec_obsah" style="width: 280px;">2-nazev</div> <div class="sloupec_obsah" style="width: 280px;">2-text</div> <div class="sloupec_obsah" style="width: 40px;">2-poradi</div> </div> <div class="radek"> <div class="sloupec_obsah sloupec_id" style="width: 60px;" >3</div> <div class="sloupec_obsah" style="width: 280px;">3-nazev</div> <div class="sloupec_obsah" style="width: 280px;">3-text</div> <div class="sloupec_obsah" style="width: 40px;">3-poradi</div> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.sloupec_obsah,.sloupec_nazev{ display:inline-block; }
CSS
Autoformát
CSS reset
Až na konci
$( function() { $( "#blok_obsah" ).sortable({ items: '.radek', tolerance: 'pointer', update: function(){ var hodnoty = {}; $(this).find('.sloupec_id').each(function(index){ hodnoty[$(this).text()] = index; }); var ajaxOptions = { url : 'zpracuj_hodnoty.php', data: {'radky': hodnoty}, type: 'post' } console.log(hodnoty); return jQuery.ajax(ajaxOptions); } } ); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>