How do I modify the ui.helper in jquery ui droppable?

Question

So I setup a draggable like this:

$(".draggable").draggable({
  helper: function() {
    return $("<img src='/images/valid.png'>");
  }
});

Which gives me desired effect of an image indicating a valid drag

But on the droppable over, I want to do a test to see if the droppable tagrte is invalid then change that image to something that looks like a circle with a line through it to indicate it is invalid.

I thought it would be like this: (just doing a test where I always make it look invalid)

$(".droppable").droppable({
  over : function(event, ui) {
    ui.helper.html("<img src='/images/invalid.png'>");
  }
});

But this doesn't do anything. In fact if I print JSON.stringify(ui.helper) it just outputs this:

{"0":{},"selector":"","length":1}

That doesn't look anything like the img object I returned.

So what gives?

Is there another way I can do this?

Answer 1

You can detect target like this:

Online result ( Fiddle )

html

<div class="dragMe">Drag me</div>
<div id="content">
  <div id="divInvalid">
   drop here
  </div>
</div>

JavaScript

$(init);

function init() {
    $('.dragMe').draggable({
        containment: '#content',
        cursor: 'move',
        helper: newDiv,
        revert: "invalid",
    });

    $('#divInvalid').droppable({
        over: function (event, ui) {
            $(event.target).addClass('validClass');
        },
        out: function (event, ui) {
            $(event.target).removeClass('validClass');
        }
    });

    function newDiv() {
        $row = $(document.createElement('div'));
        $row.attr("id", "droppableDiv");
        $row.html("dragged");
        return $row;
    }

}