jquery ui - 如何将图像放入模态

Question

我一直在努力让它发挥作用。我有一个模态，我在可拖动时调用 - 调用拖动函数。我想将元素放入这个被调用的模式中。我似乎无法将可拖动元素集中到模态中。有人可以帮我解决这个问题。这是我的代码：

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

函数(){

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

函数(){

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

);

$(".tut-img").draggable( {
hoverClass: "dropHover", 助手：“克隆”， 不透明度：“0.5”， handle: ".tut-img", // 使工具栏成为可拖动部分 拖动：函数（ev，ui）{ $('#newPerson').dialog("open"); }, 停止：函数（ev，ui）{ $('#newPerson').dialog("close"); } } ); $(".newPersonDrop").droppable( { 接受：“.tut-img”， 下降：函数（ev，ui）{ var dropItem = ui.draggable.clone().addClass("droppedItemStyle");
$(this).append(droppedItem); alert('我被叫了');
} } );

});

Answer 1

首先缓存你的对话框

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

在您的可放置函数中

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