Home/ Questions/Q 9023755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T05:50:14+00:00

While the jQuery sortable widget works fine in most cases, in the case of

  • 0

While the jQuery sortable widget works fine in most cases, in the case of an ordered list, the numbering gets botched up when we drag an element. The following is a sample program to illustrate this :

<!DOCTYPE html>
<html>

    <head>
        <script src="jquery-1.6.2.min.js"></script>
        <script src="jquery-ui-1.8.16.custom.min.js"></script>
        <script>
            $(document).ready(function () {
                $('ol').sortable();
            });
        </script>
    </head>

    <body>
        <ol>
            <li>
                <label for="name">Name</label>
                <input type="text" id="name" />
            </li>
            <li>
                <label for="class">Class</label>
                <input type="text" id="class" />
            </li>
        </ol>
    </body>

</html>

Before dragging :

enter image description here

During dragging :

enter image description here

The ordering gets restored once the drag is complete. This bug has been noted before but not fixed. Has anybody found a cure for this ?

Here is the fiddle for it

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is caused by the placeholder of jquery UI which is automatically added to your list when sortable start. You can actually simply hide the placeholder on start event or create your own class which has display none.

    Here the idea:

    $(document).ready(function () {
    $('ol').sortable({
        start: function( event, ui ){
            $(ui.item).parent().find('.ui-sortable-placeholder').hide();
        },
    });
});

    Or:

    <script>
    $(document).ready(function () {
        $('ol').sortable({placeholder: "sortable-placeholder"});
    });
</script>

<style>
    .sortable-placeholder {display: none;}
</style>

    EDIT:

    You can also actually set the placeholder display to block so that it is not assumed as a list child:

    .sortable-placeholder {
    height: 20px;
    display: block;
}

    Here modified FIDDLE.

    • 0