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

$（selector）.draggable（）使匹配元素可拖动

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

添加后，只需将附加的新项目拖放

即可

类似

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

Answer 2

首先在你的代码中出现问题，你追加带有id的元素，该元素创建具有相同id的元素，但id必须是唯一的。您可能希望像家一样更新所有ID，挂起到class="home"等等。

否则，当您致电$('#home')以获取ID为home的元素时，您将只获得第一场比赛（即使有超过1场）

解决您的问题

新的附加项目未与.draggable()一同启动，因此请在追加后调用$(".draggable").last().draggable();。（因为append元素将始终是最后一个元素，使用.last()将定位所有.draggable元素中的最后一个元素）

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

附加后可拖动的跨度不可拖动

2 个答案: