clone goutte avec jquery ui

Question

Je suis beginer js et j'ai besoin et programmation peu d'aide si quelqu'un peut me aider avec mon code ...

Je crée une « simple planificateur de voyage » mais je dois clone classe .draggable sur la table mais aussi besoin de travailler comme ici: http://jsbin.com/erofot/17, alors que d'ajouter un clone et de travailler de la même manière

Ainsi, après traîner, div doit être à nouveau redimensionnable, draggable, donc seulement sur exemple.

Comment faire?

J'essayais avec l'aide: clone mais ne travaille pas.

Merci et désolé pour mon anglais.

le code:

<script> 
    $(function() { 
    $(".draggable").resizable(); 
    $(".draggable").draggable({revert: 'invalid', snap: "#drop_here td", opacity: 0.7}); 
    $("#drop_here td").droppable({ 
     accept: '.draggable', 
     drop: function(event, ui) { 
     $(this) 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 

Answer 1

Si vous cloner l'élément alors vous devez instancier draggable, redimensionnable, etc. à nouveau goutte:

$("#drop_here td").droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     $(this).find("p").html("Dropped!"); 
     var drg = ui.draggable.clone() 
     drg.resizable(); 
     drg.draggable({revert: 'invalid', helper: 'clone', snap: "#drop_here td", opacity: 0.7}); 
     $(this).append(drg); 
    } 
}); 

est ici mis à jour JSBin.