可拖动的跨度被拖拽后不可拖动

$(".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

可拖动的跨度被拖拽后不可拖动

回答

相关问题