views:

75

answers:

1

Hi, I am trying hard to make this work! I have a list of images inside a div which i make draggable. I also have a dialog which is triggered (open) when dragging starts. For some reason I cannot drop inside this dialog. I can drop everywhere else on the page except inside a dialog. here is my code:

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

Any help or insight will be greatly appreciated.

Thanks

A: 

I finally got it! After hours and hours of trying, this works. I moved the dialog open method from draggable:drag to draggable:start. Then i start getting errors saying this.helper on the draggable method is null or not an object on firefox tools->error console.

I diabled firebug and now it works perfectly!

Thanks for all your help! Praveen

paravamu