Question

I’m trying to understand why

$('#title').replaceWith('ha'); 

will work outside the

drop: function(event, ui) {}

area in jquery’s droppable script, but it won’t work inside. Specifically, if I do

$(".droppable").droppable({
drop: function(event, ui) {
    $('#title').replaceWith('ha'); 
     }

I get a Runtime Error (line 1102) data(...).options is null or not an object. Also if I insert a $('#title').append('ha'); inside the drop:, it works.
However if I put $('#title').replaceWith('ha'); anywhere else outside

$(".droppable").droppable({ /* */  });

it works?

Answer 1

Does the element with id=’title’ also have class=’droppable’

I could see if it is trying to remove an element that would cause the drop event to occur there may be no more element to work with and you could get a ‘not an object’ error. I don’t know for sure without trying this out myself.

Maybe what you can do is mark the object with some dummy class (jQuery’s data would be more suitable and comply with the SRP, but that is out of the scope of this answer), and then outside of the droppable’s drop function you can do the replacement

something like…

$(".droppable").droppable({
    drop: function(event, ui) {
        // mark the element for replacement
        $('#title').addClass('replaceThisElement'); 
    }
});

// outside of the drop function
$('#title .removeThisElement').replaceWith('ha');