Question

我正在尝试使用jquery ui可排序函数创建一个可排序列表。它在这个网站上的功能非常无响应，但我过去使用过相同的标记并没有遇到任何问题。这是我的标记：

HTML：

<div class="list-group ui-sortable">
        <div class="list-group-item" style="position: relative;">
        <div class="row">
            <div class="col-xs-8 col-md-10">
                <a href="/rob/roar/admin/subcategory/1/25/30"><span class="fa fa-angle-double-right"></span> category two</a>
                <form class="hidden form-horizontal" action="/rob/roar/admin/editcategory">
                    <input type="text" name="categoryname" value="category two">
                    <button type="submit" class="btn btn-success">Edit</button>
                </form>
            </div>
            <div class="col-xs-4 col-md-2 text-right">
                <button class="btn delete admin-title" data-toggle="popover" data-trigger="focus" data-container="body" data-html="true" data-placement="top" title="" data-content="<center><a class='confirm-delete' href='/rob/roar/admin/deletecategory/30'>Yes</a></center>" data-original-title="Are you sure you want to delete?"><span class="fa fa-times"></span> Delete</button>
            </div>
        </div>
    </div><div class="list-group-item" style="position: relative;">
        <div class="row">
            <div class="col-xs-8 col-md-10">
                <a href="/rob/roar/admin/subcategory/1/26/31"><span class="fa fa-angle-double-right"></span> test</a>
                <form class="hidden form-horizontal" action="/rob/roar/admin/editcategory">
                    <input type="text" name="categoryname" value="test">
                    <button type="submit" class="btn btn-success">Edit</button>
                </form>
            </div>
            <div class="col-xs-4 col-md-2 text-right">
                <button class="btn delete admin-title" data-toggle="popover" data-trigger="focus" data-container="body" data-html="true" data-placement="top" title="" data-content="<center><a class='confirm-delete' href='/rob/roar/admin/deletecategory/31'>Yes</a></center>" data-original-title="Are you sure you want to delete?"><span class="fa fa-times"></span> Delete</button>
            </div>
        </div>
    </div><div class="list-group-item">
        <div class="row">
            <div class="col-xs-8 col-md-10">
                <a href="/rob/roar/admin/subcategory/1/1/1"><span class="fa fa-angle-double-right"></span> Administration</a>
                <form class="hidden form-horizontal" action="/rob/roar/admin/editcategory">
                    <input type="text" name="categoryname" value="Administration">
                    <button type="submit" class="btn btn-success">Edit</button>
                </form>
            </div>
            <div class="col-xs-4 col-md-2 text-right">
                <button class="btn delete admin-title" data-toggle="popover" data-trigger="focus" data-container="body" data-html="true" data-placement="top" title="" data-content="<center><a class='confirm-delete' href='/rob/roar/admin/deletecategory/1'>Yes</a></center>" data-original-title="Are you sure you want to delete?"><span class="fa fa-times"></span> Delete</button>
            </div>
        </div>
    </div>      
</div>

Javascript（很简单）：

$(document).ready(function(){
    $('.list-group').disableSelection();
    $('.list-group').sortable();
});

我最初的想法是所有隐藏的形式和元素内部的弹出导致某种奇怪的滞后，但删除所有这些并尝试它仍然导致问题。

以下是行动滞后的GIF

fiddle

任何想法将不胜感激！谢谢！

Answer 1

这看起来是由.list-group-item设置为transition: 400ms;造成的。

.list-group-item {
  transition: 400ms;
  padding: 10px 25px;
}

删除它会消除滞后：http://jsfiddle.net/nduqyzur/2/

jQuery UI Sortable非常滞后/无响应（所有浏览器）

1 个答案: