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/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <button onclick="vlozitObsah();">vlozit obsah</button> <div class="telo"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#posibleOption, #useOption { border: 3px solid #ccc; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #posibleOption li, #useOption li { border: 3px solid #aaa; margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
CSS
Autoformát
CSS reset
Až na konci
function vlozitObsah() { $(".telo").html('<ul id="posibleOption" class="connectedSortable"> <li class="ui-state-default">Item 1</li><li class="ui-state-default">Item 2</li></ul><ul id="useOption" class="connectedSortable"><li class="ui-state-highlight">Item 1</li><li class="ui-state-highlight">Item 2</li></ul'); } $(function() { $("#posibleOption, #useOption").sortable({ connectWith: ".connectedSortable" }).disableSelection(); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>