jQuery UI排序是非常laggy /无反应（所有浏览器）

我想做一个可排序的列表与jQuery的UI排序功能。它在这个网站上运行非常缓慢，但是我在过去使用了相同的标记，并没有遇到任何问题。这里是我的标记：jQuery UI排序是非常laggy /无反应（所有浏览器）

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

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

来源

2014-10-31 robz228

无法重现的问题... http://jsfiddle.net/nduqyzur/ – sinisake 2014-10-31 18:37:58

@nevermind你的小提琴不像在所有工作：） – webeno 2014-10-31 18:39:24

@webeno，实际上，它工作正常，尝试选择div，并将其替换。 ;） – sinisake 2014-10-31 18:40:50

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

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

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

来源

2014-10-31 18:47:39 webeno

jQuery UI排序是非常laggy /无反应（所有浏览器）

回答

相关问题