2009-12-19 79 views
1

我正在努力完成這項工作!我有一個div裏面的圖像列表,我可以拖動。我也有一個對話框,當拖動開始時觸發(打開)。出於某種原因,我不能放在這個對話框中。除了在對話框中之外,我可以放在頁面的其他地方。這裏是我的代碼:拖放到對話框中

$(document).ready(function(){ 
    // Executed once all the page elements are loaded 
    //setup new person dialog 
    // Change overlay color and opacity 
    $('#sample').dialog({ 
     //dialog options 
     autoOpen: false, 
       draggable: false, 
       modal: false, 
       show: 'explode', 
       closeOnEscape: true, 
       position: 'top', 
       minHeight: '400', 
       minWidth: '600', 
       width: 750, 
       title: "Some title", 
       open: function(type, data) { 
        $(this).parent().appendTo("form"); 
       } 
     }); 
$(".random-img").draggable(
     { 
      cursor: "move", 
      helper: "clone", 
      opacity: "0.5", 
      zIndex: "2700", 
      containment: "document", 
      handle: ".random-img", // makes toolbar the dragable part 
      drag: function(ev, ui) { 
       $('#sample').dialog("open"); 
      } 
     } 
    ); 
    $("#sample").droppable(
    { 
     accept: ".random-img", 
     tolerance: "touch", 
     drop: function(ev, ui) 
     {     
      var droppedItem = ui.draggable.clone().addClass('sclass');     
       $(this).append(droppedItem);        
     }  
    } 
    ); 
    }); 

</script> 
<html> 
<head> Page test </head> 
    <body> 
      <div class="random-img"> 
       <img src="images/someimage.jpg" />    
      </div> 
       <div id='sample'> 
       </div> 
    </body> 
</html> 

任何幫助或洞察力將不勝感激。

謝謝

+0

它的'$(ui.draggable).clone()。addClass('sclass')' – czarchaic 2009-12-19 23:53:57

+0

謝謝czarchaic,我加了你提到的,它仍然不起作用。有一件事,雖然我確實看到了當我玩對話選項的時候,當我設置autoOpen:true時,它完美地工作!但是,當頁面加載時,我不希望它打開。 – paravamu 2009-12-20 13:41:59

回答

1

我終於明白了!經過數小時和數小時的嘗試,這是有效的。我將對話框的打開方法從可拖動:拖動到可拖動:開始。然後我開始得到錯誤,說可拖動方法this.helper爲null或不是firefox工具 - >錯誤控制檯上的對象。

我使用了螢火蟲,現在它完美地工作!

感謝您的幫助! Praveen