ドラッグ可能なスパンが追加された後にドラッグできない

Question

$(".draggable").draggable(); 
$(".face").droppable({ 
    drop: function(event, ui) { 
    $(".draggable").each(function(){ 
    $(this).draggable(); 
}); 
    $(ui.draggable).animate({ 
     fontSize: 0 
    },1000,function() { 
     $(".itemContainer").append(
      "<span class='draggable' id='" + 
      $(ui.draggable).attr("id") + 
      "'>" + 
      $(ui.draggable).html() + 
      "</span>" 
     ); 
     } 
    ); 
    if (ui.draggable.attr("id") == "homework") { 
     gradeLevel("+=20"); 
     sLevel("+=25"); 
     socialLevel("-=20"); 
    } else if (ui.draggable.attr("id") == "meme") { 
     sLevel("-=20"); 
     socialLevel("+=10"); 
     gradeLevel("-=15"); 
    } else if (ui.draggable.attr("id") == "hang") { 
     sLevel("-=30"); 
     socialLevel("+=20"); 
     gradeLevel("-=20"); 
    } 
    checkLevel(); 
    } 
}); 

<div class="center"> 
<div class="bar sui"> 
<div class="barFilled s"></div> 
</div> 
<div class="bar gra"> 
<div class="barFilled grade"></div> 
</div> 
<div class="bar soc"> 
<div class="barFilled social"></div> 
</div> 
<div class="face"> 
<div class="eyelid"></div> 
<div class="eye first"></div> 
<div class="eyelid"></div> 
<div class="eye second"></div> 
<div class="mouth"></div> 
</div> 
</div> 
<div class="itemContainer"> 
<p class="dragEx">Drag and Drop Items onto His Face to Affect his Life<br />(Click me to go away)</p> 
<span class="draggable" id="meme">Look at a Meme</span> 
<span class="draggable" id="homework">Do Homework</span> 
<span class="draggable" id="hang">Go out with friends</span> 
</div> 

divにスパンをドラッグすると、それが消えてコンテナに新しいスパンが追加されるようにしようとしています。すべての追加作業がうまくいけば、divにドラッグされる前からドラッグ可能な影響はありません。

Answer 1

よう

何かを付加した後、あなたが作成したIDを持つ要素を追加し、ドラッグ可能であることが、あなたが付加さ新しいアイテムを作ります同じidを持つ要素ですが、idは一意でなければなりません。あなたが家にidを持つ要素を取得するために$('#home')を呼び出すときにのみ、第一試合（1以上があるにもかかわらず）

を取得しますが、そうでない場合

など、自宅のようにすべてのあなたのIDを更新したいclass="home"にハングアップする可能性があります

あなたの問題を解決するに

新しい追加項目はこれだけあなたの追記後$(".draggable").last().draggable();を呼び出す.draggable()を開始しませんでした。

$(".itemContainer").append(
    "<span class='draggable' id='" + 
    $(ui.draggable).attr("id") + 
    "'>" + 
    $(ui.draggable).html() + 
    "</span>" 
); 
    $(".draggable").last().draggable(); 

Answer 2

$（セレクタ）.draggable（）

$（tgtEl）.append（HTML）は、新たな要素を追加してドラッグ可能な整合素子を作ります。

単にあなたがそれをあなたのコードに問題がある

$(html).appendTo(tgtEl).draggable(); 

第一