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

Question

我正在尝试执行两项相当简单的任务。

1. 我只是希望一个可拖动的图像在被拖动时更改为不同的图像，并在松开时恢复正常。我在 jQuery UI 网站中读到了有关 Helper 选项的信息，但这不会使我开始拖动时原始图像消失。我希望原始的可拖动图像在拖动时变成新的图像。然后回到我放手之前的样子。

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

   <

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

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

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

例如，如果我可以在可拖动对象被拖入 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

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

再多尝试一下，看看您如何使用 droppable 和draggable，您可以使用这种简化的方法。

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