如何多次运行可放置函数答案

【问题标题】：How to run a droppable function more than once如何多次运行可放置函数
【发布时间】：2018-12-19 16:54:57
【问题描述】：

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

    <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>

【问题讨论】：

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable jquery-ui-droppable

【解决方案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();

【讨论】：