CODEWITHSUNDEEP
jqueryhtmljquery-ui
Edward
Edward

Reputation: 3081

Jquery function not passing parameters correctly

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.

Upvotes: 0

Views: 85

Answers (2)

Coin_op
Coin_op

Reputation: 10718

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

Upvotes: 2

Antarr Byrd
Antarr Byrd

Reputation: 26071

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

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

Upvotes: 0

Related Questions