CODEWITHSUNDEEP
jqueryimagejquery-uihtmldraggable
YanZ263
YanZ263

Reputation: 33

Changing a draggable element's content while dragging and hovering over a certain div using jQuery UI

I'm trying to do two fairly simple tasks.

  1. I simply want a draggable image to change to a different image when its being dragged, and goes back to normal when I let go. I read about the Helper option in the jQuery UI website but this doesnt make the original image disappear when I start to drag. I want the original draggable image to change into a new one while its being dragged. and return to what it was before when I let go.

  2. What I want to do is to have the draggable object (an image) change to a different image when I drag it above a certain div (but not dropping it, still dragging).

So let say I have a square Div and Image1 is draggable. I want Image1 to become Image2 when i drag it over the square Div.

Is there an easy way to do this with jQuery UI? Thanks in advance.

An alternative would be to change the class of the div when the drag happens.

Something like this for example, if I can change class of the div the moment the draggable gets dragged into class2 and when it mouse over a div to class3 that'd help alot, thanks:

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

Upvotes: 2

Views: 5700

Answers (1)

apaul
apaul

Reputation: 16170

It took a little "playing" around, but I think I've got what you're after.

Played with this a bit more, and seeing as how you're using droppable as well as draggable you can use this simplified method.

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">');
    }
});

Other Methods Example 1 Example 2 Example 3

Upvotes: 4

Related Questions