Question

I have a page where i have a sortable list of items (a div with class ‘sortable’), which can initially have some items in it or be empty. The items are in another list on the page, and have an ‘add’ button. When add is clicked, they go into the sortable list.

When the page loads with some items in the list already, the sorting works, but items that are subsequently added into the list are not sortable, ie nothing happens when i click on their draggable element.

Here’s the relevant javascript: initially i had it with setSortables called only on page load but here i’m calling it again every time an item is moved into the sortable list.

//move this item into the sortable list
function addAssetToQuestion(asset_id){
  asset_div = jQuery("#asset_"+asset_id);
  asset_div.slideUp("fast", function(){ 
    jQuery("#assets").append(asset_div);
    asset_div.find(".add-asset-button").hide();
    asset_div.find(".remove-asset-button").show();
    asset_div.find(".name").addClass("pointerhand");     
    asset_div.slideDown("fast");
    setSortables();
  });
}

//set up the sortable list
function setSortables(){
  $(".sortable").sortable({
    handle: '.name',
    start: function() { jQuery(".audioplayer-container").hide(); },
    stop:  function() { jQuery(".audioplayer-container").show(); }
  });
}

jQuery(document).ready(function(){
  setSortables();
});

thanks, max

Answer 1

Have you tried calling refresh? http://docs.jquery.com/UI/Sortable#method-refresh

Otherwise, at first glance I might suggest as a temporary fix to call destroy() and then setSortables() each time you drop an item on the list…