Pas de travail déplaçable / largable avec append

J’ai du mal à faire glisser des éléments de manière dynamic. mon problème commence quand je les crois, il peut se déplacer entre eux mais pas vers un autre conteneur

function info_drag(){ var $container = $(".task-container"); var $task = $('.todo-task'); $task.draggable({ addClasses: false, connectToSortable: ".task-container", }); $container.droppable({ accept: ".todo-task", }); $(".ui-droppable").sortable({ placeholder: "ui-state-highlight", opacity: .5, helper: 'original', beforeStop: function (event, ui) { newItem = ui.item; }, receive: function (event, ui) { //get task-type and task id. var tasktype = $(this).find('.task-type').html(); var taskid = $(this).find('.task-no').html(); console.log(taskid); console.log(tasktype); dropElement = $(this).attr('id'); console.log(dropElement); // console.log($(this).closest('.ui-droppable').attr('id')); //save the status and the order of the item. if (dropElement == "backlog") { // save the status of the item } else if (dropElement == "pending") { // save the status of the } else if (dropElement == "inProgress") { } else if (dropElement == "completed") { } } }).disableSelection().droppable({ over: ".ui-droppable", activeClass: 'highlight', drop: function (event, ui) { $(this).addClass("ui-state-highlight"); } }); 

}

info_drag(); // fonction d’appel

en ajax, créer des éléments dinamic

  html = '
'; html += '
'; html += '
# '+parsedJSON[i].idorder+'
'; html += '
/ Mesa '+parsedJSON[i].idmesa+'
'; html += '
'; html += '
'; html += '
'+parsedJSON[i].nombre+' '+parsedJSON[i].paterno+'
'; html += '
'; html += ''; $('#backlog').append(html);

travail glissable mais mon élément largable n’accepte pas. todo-tâche si dynamic. lors de la création des éléments directement fonctionne parfaitement sauf dynamic

entrez la description de l'image ici