javascript - 可拖动范围在附加后不可拖动

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、挂到 class="home" 等。

否则，当您调用 $('#home') 来获取 id home 的元素时，您只会获得第一个匹配项(即使有多个匹配项)

问题的解决方案

新的附加项目未使用 .draggable() 启动，因此只需在您的代码之后调用 $(".draggable").last().draggable();附加。 (由于追加元素始终是最后一个元素，因此使用 .last() 将定位所有 .draggable 元素中的最后一个元素)

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