Javascript 可拖动范围在追加后不可拖动 $（“.draggable”）.draggable（）； $（“.face”）.可拖放({ drop：函数（事件、用户界面）{ $（“.draggable”）。每个（函数（）{ $（this.draggable（）； }); $（ui.draggable）.设置动画({ 字体大小：0 }，1000，函数（）{ $（“.itemContainer”）.append( "" + $（ui.draggable.html（））+ "" ); } ); if（ui.draggable.attr（“id”）=“家庭作业”）{ 等级等级（“+=20”）； sLevel（“+=25”）； 社会层面（“-=20”）； }else if（ui.draggable.attr（“id”）=“meme”）{ sLevel（“-=20”）； 社会层面（“+=10”）； 等级等级（“-=15”）； }else if（ui.draggable.attr（“id”）=“挂起”）{ sLevel（“-=30”）； 社会层面（“+=20”）； 等级等级（“-=20”）； } checkLevel（）； } }); 将物品拖放到他的脸上，以影响他的生活（单击我走开） 看一个模因 做家庭作业 和朋友出去

我试图使之成为这样，当在div上拖动一个span时，它会消失，然后将一个新span追加到容器中。所有的附加都可以正常工作，只是它在被拖到div之前没有可拖动的效果。

$（选择器）。draggable（）使匹配的元素可拖动

$（tgtEl）.append（html）正在添加新元素

在添加新项目后，只需将其设置为可拖动即可

差不多

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

$（选择器）.draggable（）使匹配的元素可拖动

$（tgtEl）.append（html）正在添加新元素

在添加新项目后，只需将其设置为可拖动即可

差不多

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

---

首先，您的代码中有一个问题，您使用id附加元素，这将创建具有相同id的元素，但id必须是唯一的。您可能需要更新所有id，如home，挂起

class=“home”

等

否则，当您调用

$（“#home”）

以获取id为home的元素时，您将只获得第一个匹配项（即使有多个匹配项）

问题的解决方案

新附加项没有使用

.draggable（）

启动，因此只需调用

$（“.draggable”）.last（）.draggable（）在追加之后。（由于append元素始终是最后一个元素，因此使用
。last（）
将针对所有
.draggable
元素中的最后一个元素）

$（“.itemContainer”）.append(
"" +
$（ui.draggable.html（））+
""
);
$（“.draggable”）.last（）.draggable（）；
1您的代码中有一个问题，您使用id附加元素，这将创建具有相同id的元素，但id必须是唯一的。您可能需要更新所有id，如home，挂起
class=“home”
等

否则，当您调用
$（“#home”）
以获取id为home的元素时，您将只获得第一个匹配项（即使有多个匹配项）

问题的解决方案

新附加项没有使用
.draggable（）
启动，因此只需调用
$（“.draggable”）.last（）.draggable（）在追加之后。（由于append元素始终是最后一个元素，因此使用
。last（）
将针对所有
.draggable
元素中的最后一个元素）

$（“.itemContainer”）.append(
"" +
$（ui.draggable.html（））+
""
);
$（“.draggable”）.last（）.draggable（）；
你的HTML代码？我已经更新了以上所有内容，你能看到我的HTML代码吗@Stuart Fongy你的HTML代码？我已经更新了以上所有内容，你能看到我的HTMLEMS对我很好吗@方志伟
  $(".itemContainer").append(
    "<span class='draggable' id='" +
    $(ui.draggable).attr("id") +
    "'>" +
    $(ui.draggable).html() +
    "</span>"
  );
  $(".draggable").last().draggable();