jquery - 拖动有序列表项时,后续项的编号总是增加1

Dau*_*aud 10 html css jquery jquery-ui jquery-ui-sortable

虽然jQuery sortable widget在大多数情况下工作正常,但在一个情况下ordered list,numbering gets botched up when we drag an element.以下是一个示例程序来说明这一点:

<!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>
Run Code Online (Sandbox Code Playgroud)

在拖动之前:

在此输入图像描述

拖动期间:

在此输入图像描述

拖动完成后,订单将恢复.之前已经注意到此错误,但未修复.有没有人找到治疗方法?

是它的小提琴

Sub*_*Red 12

这是由placeholderjquery UI 引起的,当可排序的启动时,它会自动添加到列表中.实际上,您可以简单地在启动事件中隐藏占位符,也可以创建自己的显示无的类.

这个想法:

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

要么:

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

<style>
    .sortable-placeholder {display: none;}
</style>
Run Code Online (Sandbox Code Playgroud)

编辑:

您还可以将占位符显示实际设置为阻止,以便不将其视为列表子项:

.sortable-placeholder {
    height: 20px;
    display: block;
}
Run Code Online (Sandbox Code Playgroud)

这里修改了FIDDLE.