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