jquery - 使用 jQuery UI 在拖动和悬停在某个 div 上时更改可拖动元素的内容

Question

我正在尝试完成两个相当简单的任务。

1. 我只是想让一个可拖动的图像在被拖动时变为不同的图像，并在我放手时恢复正常。我在 jQuery UI 网站上阅读了有关 Helper 选项的信息，但这并没有使原始图像在我开始拖动时消失。我希望原始可拖动图像在拖动时变为新图像。并恢复到我放手时的状态。

2. 我想做的是当我将可拖动对象(图像)拖动到某个 div 上方时(但不放下它，仍在拖动)将其更改为不同的图像。

   <

假设我有一个方形 Div 并且 Image1 是可拖动的。当我将 Image1 拖到正方形 Div 上时，我希望它变成 Image2。

有没有一种简单的方法可以使用 jQuery UI 来做到这一点？提前致谢。

另一种方法是在拖动发生时更改 div 的类。

例如，如果我可以在 draggable 被拖入 class2 时更改 div 的类，并且当鼠标悬停在 div 上到 class3 时，这会有很大帮助，谢谢:

<style>

.class1{
   width:50px;
   height:50px;
   border:1px solid black;
}

.class2{
   width:75px;
   height:75px;
   border:1px solid black;
}

.class3{
   width:100px;
   height:100px;
   border:1px solid black;
}

.droppable {
   width:150px;
   height:150px;
   border:1px red;
}

</style>

   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
   $( "#drag-container" ).draggable({ revert: true });
});
<script>

<div id="drag-container" class="class1">
   <p>Drag Box</p>
</div>

<div class="droppable">
   <p>Drop Area</p>
</div>

Answer 1

花了一点时间“玩”了一下，但我想我已经得到了你想要的东西。

再尝试一下，看看您是如何使用可放置和可拖动的，您可以使用这个简化的方法。

Updated Example

$("#draggable").draggable({
    helper: "original",
    start: function (event, ui) {
        $("#draggable").html('<img src="http://gillespaquette.ca/images/stack-icon.png">');
    },
    revert: function (x) {
        if (!x) {
            $("#draggable").html('<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png">');
            return true;
        }
    }
});

$('.box').droppable({
    drop: function (event, ui) {
        $("#draggable").html('<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png">');
    },
    over: function (event, ui) {
        $("#draggable").html('<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png">');
    },
    out: function (event, ui) {
        $("#draggable").html('<img src="http://gillespaquette.ca/images/stack-icon.png">');
    }
});

其他方法 Example 1 Example 2 Example 3