JQuery-UIのドラッグ可能なアイテムがぼやけて表示される

Question

2つのdiv：leftDivとmainDivがあります。 leftDivには、いくつかのリスト要素が含まれており、それらはドラッグ可能であり、mainDivにドロップ可能です。私はこれらの落としたアイテムをmainDivの中にドラッグ可能にしたいと思っていますが、このdivの中の最初のドラッグの後、アイテムはドラッグ不可になります。これをどうすれば解決できますか？ここに私のjQueryのコードは次のとおりです。

$('#output li').draggable({ 
    helper: 'clone', 
    revert: 'invalid' 
}); 
$('#mainDiv').droppable({ 
    drop: function (event, ui) { 
     if(ui.draggable.hasClass('foo')){ 
      $(ui.helper).remove(); 
      $(this).append(ui.draggable.draggable()); 
     } 
     else { 
      var item = $('<div class="foo">').append(ui.draggable.text()); 
      item.draggable(); 
      $(this).append(item); 
     } 
    } 
}); 

Answer 1

あなたはこのようにそれを修正することができます：

$('#mainDiv').droppable({ 
    drop: function (event, ui) { 
     if(ui.draggable.hasClass('foo')){ 
      //$(ui.helper).remove(); 
      var draggedItem = ui.draggable.draggable();    
      $(this).append(draggedItem); 
      draggedItem.draggable(); 
     } 
     else { 
      var item = $('<div class="foo">').append(ui.draggable.text()); 
      item.draggable(); 
      $(this).append(item); 
     } 
    } 
}); 

Online Demo (fiddle)