如何多次运行可放置函数

Posted 2023-05-08

【中文标题】如何多次运行可放置函数

【英文标题】：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>

【参考方案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();