jQuery causing browser to timeout when lots of sortables
<p>I'm creating a feature in my software that allows users to edit multiple items at once. They can choose what items they want and each one is placed in a column. I've then created a drag and drop interface to copy data from each item.</p>

<p>Problem is, I have to load a sortable for each column. If they choose 10 columns, it loads a heck of a lot of sortables which is causing the browser to hang and bring up a message in FireFox asking if I want to stop the script from running. This is obviously because browsers have a limited javascript execution time.</p>

<p>Is there a way I can make jQuery sortables load without causing the browser to hang?</p>

<p>Not sure if it'll help but my code...</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {

    $(".servicesMultipleMembers").sortable({
        connectWith: '.servicesMultipleMembers',
        placeholder: 'servicePlaceHolder',
        containment: '#servicesMembers',
        helper: 'clone',
        start: function(event, ui) {
            moving_li_index_members = $(this).find('li:hidden').index();
            $(this).find('li:hidden').show();
        },
        remove: function(event, ui) {
            var newRow = $(ui.item).html();
            var newRowRel = $(ui.item).attr('memberId');
            var newRowTarget = $(event.target).find('li:eq(' + (moving_li_index_members) + ')');
            if ($(newRowTarget).length == 0) {
                $(event.target).append('&lt;li memberId="' + newRowRel + '"&gt;' + newRow + '&lt;/li&gt;');
            } else {
                newRowTarget.before('&lt;li memberId="' + newRowRel + '"&gt;' + newRow + '&lt;/li&gt;');
            }
        },
        receive: function(event, ui) {
                        var newRowImg = $(ui.item).find('span.serviceTitle img').attr('src');
            var newRow = $(ui.item).html();
            newRow = newRow.replace(newRowImg, site_url + 'img/help.png');
            newRow = newRow.replace('&lt;span class="member_declined"&gt;', '&lt;span class=""&gt;');
            $(ui.item).html(newRow);
            MultipleServices.checkServicesMembersConflicts($(ui.item));
            update_member_stop = true;
        },
        update: function(event, ui) { // Only update if reordering list
            if (!update_member_stop &amp;&amp; $(event.target).attr('id') == $(ui.item).parent().attr('id'))
                MultipleServices.updateServiceMembers($(ui.item).parent());
            update_member_stop = false;
        }
    });

});
&lt;/script&gt;
</code></pre>
