10

虽然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>

拖动前：

在此处输入图像描述

在拖动过程中：

在此处输入图像描述

拖动完成后，排序将恢复。此错误之前已注意到但未修复。有没有人找到治疗这个的？

这是它的小提琴

4

1 回答 1

12

这是由placeholderjquery UI 引起的，它会在可排序开始时自动添加到您的列表中。实际上，您可以简单地在开始事件上隐藏占位符或创建自己的不显示的类。

这里的想法：

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

或者：

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

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

编辑：

您还可以实际将占位符显示设置为阻止，以便不将其假定为列表子项：

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

这里修改了 FIDDLE。

于 2012-12-20T05:57:53.793 回答