Question

I am working with jquery draggables and droppables, and can’t figure out why it appears that a div I have,

 <li class="ui-widget-header"><img style="position: relative; left: 10px; top: 50px;" src=""></img></li>

does not seem capable of displaying both an image and text at the same time. The div above is my droppable; I am trying to drag both images and text to it. When I drag the images first, they work fine, but once I try to drag text, the images no longer display (although the droppable does acknowledge that the image was dragged there).

Here is my droppable code, although I’m not sure whether the problem stems from something in my html or from this (note: the ‘li’ above is the droppable):

drop: function(event,ui) {
                if (ui.draggable.find("img").length) {
                   $(this)
                        .addClass("ui-state-highlight");
                   $("img", this).attr("src",  ui.draggable.find("img").attr("src"));
                } else {
                    $(this)
                        .addClass("ui-state-highlight")
                            .text(ui.draggable.text());
                }
}

Any suggestions would be appreciated. Thanks!

Answer 1

This is because of your Javascript code. On text drop, you’re setting the .text value of your <li> tag to the dragged text, which overwrites the <img> tag you had in there. Do you just want this to append text to whatever is in the <li> then?

This change below to your else block should append a new paragraph with the included text below your image. Obviously, feel free to change the paragraph to whatever you want.

        } else {
            $(this)
                .addClass("ui-state-highlight")
                    .append('<p>' + ui.draggable.text() + '</p>');
        }