2

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

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

1 回答 1

4

它花了一点“玩”，但我想我已经得到了你想要的。

多玩一点，看看你是如何使用 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

于 2013-05-22T17:52:39.420 回答