jQuery draggable with droppable constraint on mouse position issue
<p>Currently I trying to pickup jQuery and build a drag &amp; drop environment. I manage to get most of the things working. However when I trying to drag more then 2 item into drop area, the subsequent item drop will always have a Y-position drop greater then previous item drop.</p>

<p>Anyone know where is the problem ? Thank you in advance...</p>

<p>PS : While I testing this UI by dragging it quickly across a size down window with scroll bar at the side where the drop-able area is greater then window size, the drag item will manage to escape jQuery containment set. Which end up hidden or dirty element in the background. Is there a better way and cleaner way to code a drag drop web environment ?</p>

<pre><code>&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

    &lt;link rel="stylesheet" type="text/css" href="http://stkxp/metasphere/fac/home/home.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(
            function(){
                $("#menu").draggable();

                $(".drag").draggable(
                    {helper:'clone'}
                );

                $("#drop").droppable(                        
                    {
                        accept:'.drag',
                        drop:function(event,ui){

                                newID = $.datepicker.formatDate('@', new Date() );

                                $(this).append(                                        
                                    $(ui.draggable).clone().attr(
                                        {
                                            id:newID
                                        }
                                    )
                                );

                                $("#"+newID).css(
                                    {                                            
                                        top: event.pageY +"px",
                                        left: event.pageX-this.offsetLeft +"px"
                                    }
                                );

                                $("#"+newID).addClass("node");    

                                $("#"+newID).removeClass("drag");

                                $("#"+newID).draggable(
                                    {
                                        containment:$("#drop")
                                    }
                                );

                            }
                    }
                )


            }
        );
    &lt;/script&gt;

    &lt;style&gt;        
        #drop{
            width:55%;
            min-width:400px;    

            min-height:1000px;

            float:left;
            border:1px solid blue;    
        }
        #property{
            width:24%;
            min-width:235px;        

            float: left;
            border:1px solid black;                
        }            
    &lt;/style&gt;        
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="drop"&gt;&lt;/div&gt;
    &lt;div id="property"&gt;            
        &lt;div class="drag"&gt;-&gt; Item 1&lt;/div&gt;                                 
    &lt;/div&gt;        
&lt;/body&gt;
</code></pre>

<p></p>
