如何 运行 一个可放置函数不止一次

Question

到目前为止，我有两张可拖动的图片（一男一女）。当我拖动男人时，我希望可放置的图像变成男人，女人也一样。到目前为止它有效，但假设我已经将可放置图像更改为一个人。然后当我把女人拖过去的时候，它不会切换到女人的形象。它只坚持它更改为的第一个图像，我希望用户能够多次拖动和更改图像。

    <div class="types">
    <h1>TWO TYPES OF HARRASSMENT</h1>
    <p>Click and drag the employees to reveal more information.</p>
    <img class="draggable-woman" src="images/drag-woman.png" />
    <img class="draggable-man" src="images/drag-man.png" />
    </br>
    <div class="types-child">
        <img class="quid" src="images/quid-empty.png" />
        <div class="changeable-text"></div>
        <img class="hostile" src="images/hostile-empty.png" />
    </div>
</div>

<script>
$(".draggable-woman").draggable({
    helper: "clone"
  });
  $(".draggable-man").draggable({
    helper: "clone"
  });
$(".quid").droppable({
    drop: function( event, ui ) {
        if ($(ui.draggable).hasClass("draggable-woman")){
        $(this).replaceWith("<img class='quid' src='images/quid-withwoman.png'>");

        } else {
        $(this).replaceWith("<img class='quid' src='images/quid-withman.png'>")
        }
    }
});
</script>

Answer 1

只需要重新处理事件。这对你有用：

$(".draggable-woman").draggable({
    helper: "clone"
});

$(".draggable-man").draggable({
helper: "clone"
});

function handleQuidClass(){
    $(".quid").droppable({
    drop: function( event, ui ) {
            if ($(ui.draggable).hasClass("draggable-woman")){
                $(this).replaceWith("<img class='quid' src='images/quid-withwoman.png'>");
            } else {
                $(this).replaceWith("<img class='quid' src='images/quid-withman.png'>")
            }
            handleQuidClass();
        }
    });
}

handleQuidClass();