user198003 user198003 - 1 year ago 108
jQuery Question

sortable - how to serialize their info with jQuery

Can not figure out how to get order (and more info if possible, like parent's div id) of the boxes sorted by:

I guess that there is something with serialize, but have no luck and knowledge to get things done...

Answer Source

i did find a solution; here is the answer:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.4.4.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.sortable.js"></script>
    <link rel="stylesheet" href="../demos.css">
    #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable"

<div id="test">

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id="i1">Item 1</li>
    <li class="ui-state-default" id="i2">Item 2</li>
    <li class="ui-state-default" id="i3">Item 3</li>
    <li class="ui-state-default" id="i4">Item 4</li>
    <li class="ui-state-default" id="i5">Item 5</li>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>


<input type="button" id="clickme" value="Serialize div" />

    $('#clickme').click(function () {
        $("#hold").html($('#test *').serialize());

        var list = '';
        $('#sortable1 *').each(function() {
            list += $(this).attr('id') + ',';
        alert('list = ' + list);


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download