Question

http://jsbin.com/ituxij/4/edit

I am trying to drag and drop images into div’s with Jquery I have a function

<div id="trash" class=""> Trash</div>

---

$trash.droppable({
    accept: "#gallery > li",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
        var $droppableId = $(this).attr("id");

        deleteImage($droppableId, ui.draggable);
    }
});

In this case $droppableId = trash or the name of my div.

I’m calling

function deleteImage($droppableId, $item) {
    $item.fadeOut(function() {
        alert($droppableId);
        var $list = $("ul", $droppableId).length ? $("ul", $droppableId) : $("<ul class='gallery ui-helper-reset'/>").appendTo($droppableId);

        $item.find("a.ui-icon-trash").remove();
        $item.append(recycle_icon).appendTo($list).fadeIn(function() {
            $item.animate({
                width: "48px"
            }).find("img").animate({
                height: "36px"
            });
        });
    });
}

The function alerts out trash, which is correct, but when I try to pass “trash” into the .appendTo method it does not work the same as if I simple typed out trash.

Answer 1

$droppableId is simply the id of the element not a selector or the element itself.

Try .appendTo($('#'+$droppableId)); or .appendTo('#'+$droppableId);

As a side point I’d try and refrain from using $ at the start of your variables when using jquery, it can look a little confusing.