可拖動的跨度被拖拽後不可拖動

$(".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之前沒有可拖動的影響。可拖動的跨度被拖拽後不可拖動

來源

2017-06-13 Stuart Fong

你的HTML代碼？ –

我已經更新了以上所有你可以看到我的HTML –

對我來說似乎很好？ https://jsfiddle.net/9j3ofyLf/ @Stuart Fong –

1日有在你的代碼中的問題，您附加元素id爲它創建具有相同ID的元素，但ID必須是唯一的。您可能要更新所有ID就像回家，掛class="home"等

否則，當你調用$('#home')獲得與id元素家裏，你將只能得到第一次比賽（儘管有超過1）

解決您的問題

新追加的項目沒有與.draggable()發起所以只是叫你$(".draggable").last().draggable();追加後。（因爲追加元素將永遠是最後一個，使用.last()將針對所有.draggable元素的最後一個元素）

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

來源

2017-06-13 03:49:31

$（選擇器）.draggable（）使匹配元件可拖動

$（tgtEl）.append（HTML）被添加新的元件。

簡單地讓你附加爲可拖動的新項目，你追加後

像

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

來源

2017-06-13 03:47:41 Steve

可拖動的跨度被拖拽後不可拖動

回答

相關問題