CODEWITHSUNDEEP
jqueryjquery-ui
robz228
robz228

Reputation: 640

jQuery UI Sortable is extremely laggy/unresponsive (all browsers)

I am trying to make a sortable list with the jquery ui sortable function. It is functioning extremely unresponsive on this site, however i have used it with identical markup in the past and experienced no problems. Here is my markup:

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 (easy enough):

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

My initial thought was all the hidden forms and the popover inside the elements causing some kind of bizarre lag, but removing all of those and trying it plain still caused the issue.

Below is a gif of the lag in action

fiddle

Any ideas would be appreciated! Thanks!

Upvotes: 0

Views: 259

Answers (1)

benomatis
benomatis

Reputation: 5633

Looks like this is caused by .list-group-item that's set to transition: 400ms;.

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

Removing it will remove the lag: http://jsfiddle.net/nduqyzur/2/

Upvotes: 3

Related Questions