jquery ui - how to drop image into a modal

Question

Hi, I have been trying hard to get this to work. I have a modal which I call when draggable - drag function is called. I want to drop the element into this modal which was called. I cannot seem to focus the draggable element into the modal. Can someone help me with this problem. Here is my code:

    $(document).ready(function(){
    // Executed once all the page elements are loaded
     //setup new person dialog
        $('#newPerson').dialog({
                autoOpen: false,
                draggable: false,
                modal: true,
                closeOnEscape: true,
                height: '400px',
                width: '600px',
                title: "Drag to FB, Twitter",
                open: function(type, data) {
                    $(this).parent().appendTo("form");
                }
            });  

 // The hover method takes a mouseover and a mouseout function:
 $(".tut").hover(

function(){

$(this).find('.drag-label').stop().animate({marginTop:'-50px'},'fast'); },

function(){

$(this).find('.drag-label').stop().animate({marginTop:'0'},'fast'); }

);

$(".tut-img").draggable( {
hoverClass: "dropHover", helper: "clone", opacity: "0.5", handle: ".tut-img", // makes toolbar the dragable part drag: function(ev, ui) { $('#newPerson').dialog("open"); }, stop: function(ev, ui) { $('#newPerson').dialog("close"); } } ); $(".newPersonDrop").droppable( { accept: ".tut-img", drop: function(ev, ui) { var droppedItem = ui.draggable.clone().addClass("droppedItemStyle");
$(this).append(droppedItem); alert('I get called');
} } );

});

Answer 1

First cache your dialog

var dialog=$('#newPerson').dialog({
  //dialog options
});

In your droppable function

$('.newPersonDrop').droppable({
  //droppable options
  drop: function(event, ui){
    dialog.empty().append($(ui.draggable).clone());
  }
});