Is there a way to update sorts while dragging a sortable item?

Question

I have sections, and each section has elements. These elements are sortable objects that I can drag from one section to another. Some of our clients have TON sections with TON elements that cause the browser to fall to its knees. I was very green when I originally developed it, so the efficiency was not on my radar, but now I am reviewing the script, and I ran into a problem.

To solve the problem, I use lazy loading using ajax in my section lists, where items are selected only from the server when they click the "open section" button. The peculiarity that we have in an inefficient system is that the user can hold the dragged item in closed sections for 500 ms, and he will open the section.

This is the generated HTML:

<ul class="sections ui-sortable" style="display: block;"> <li id="s_3" class="ui-droppable"> <input type="hidden" value="3" name="section_id"> <span class="sectionName">Section 1</span> <ul class="items ui-sortable" style=""> <!-- Items can go here --> </ul> </li> <li id="s_11" class="ui-droppable"> <input type="hidden" value="11" name="section_id"> <span class="sectionName">Section 2</span> <ul class="items ui-sortable" style="display: block;"> <li id="i_32"> <input type="hidden" value="32" name="item_id"> <span class="itemName">Item 1</span> </li> </ul> </li> </ul> 

The problem is that the sort function gets all the swirls with a recently populated list of items.

This is how I do it, so lists can be opened by hovering over them:

 //sElement is the .sections ul function initItemDroppable( sElement ) { sElement.find('> li').droppable({ accept: '.items > li', over: function( event, ui ) { var section = $(this); var section_id = section.find('input[name="section_id"]').val(); // only start the counter if the container isn't already visible if( !$(section).find('.items').is(':visible') ) { $( document ).oneTime( '500ms', 'expandCategoryTimer', function(){ //get the items and populated the list getItems( section_id ); //according to jquery, refreshes the positions of all the sortable objects $('.sections, .items').sortable('refreshPositions'); } ); } }, out: function( event, ui ) { $( document ).stopTime( 'expandCategoryTimer' ); } }); } 

I thought that all I need is the "refreshPosition" method on sortable materials, but that doesn’t quite do the trick. I am allowed to drop an item into the END from the list, but I cannot drop it between the others unless I drop it and take it back. Any ideas?

Answer 1

You know that I hate it when you get hung up for a while, ask for help, and then find the answer later.

Turns out I didn't actually look for refreshPositions , but just ol ' refresh . When I receive the elements and move them on the screen, I update their position, and then call the update so that the new elements are recognized by the current resistance.

I was about to delete my question, but then I thought that this could help someone aside from me;)