jquery

Question

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

SubRed · Accepted Answer

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.

jquery - while dragging an ordered list item, numbering of subsequent items always increases by 1

Tags:

html

css

jquery-ui

jquery-ui-sortable

Daud

1 Answers

SubRed

Recent Activity

Donate For Us