Can't get simple drag & drop of a panel to work...

[cflynn07]

I've been struggling a lot lately, and surprisingly no one has really offered any suggestion as to what is going wrong with Ext JS 4.

I'm trying to create an extremely simple drag&drop example. My problem is that the div moves erratically around the screen when attempting to drag.

For some reason it works in this fiddle:
http://jsfiddle.net/lolo/5MXJ9/2/

but not in a web browser.

<script type="text/javascript">
        Ext.onReady(function(){
            
            Ext.define('CS.view.StartScreen', {
                extend: 'Ext.panel.Panel',
                alias: 'widget.startscreen',
                width: 1000,
                height: 1000,
                items: [{
                    xtype: 'panel',
                    title: 'Hello',
                //  closable: true,
                //  collapsible: true,
                    draggable: true,
                //  resizable: true,
                //  maximizable: true,
                    constrain: true,
                    height: 300,
                    width: 300,
                    items: [{
                        html: 'blah blah'
                    }]
                }],
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    layout: 'hbox',
                    pack: 'center',
                    items: [
                        {xtype: 'button', text: 'Click Me'}
                    ]
                }],
                listeners: {
                    render: function(sender) {
                        sender.dropZone = new Ext.dd.DropZone(sender.body, {
        
                            getTargetFromEvent: function(e) {
                                return { x: e.getX() - this.DDMInstance.deltaX, y: e.getY() - this.DDMInstance.deltaY };
                            },
                    
                            onNodeOver : function(target, dd, e, data){
                                return Ext.dd.DropZone.prototype.dropAllowed;
                            },
                    
                            onNodeDrop : function(target, dd, e, data){
                                data.panel.setPosition(target.x, target.y);
                                return true;
                            }
                        });
                    }
                }
            });
            
            Ext.create('CS.view.StartScreen', {
                renderTo: 'container'
            });
            
        });
    </script>

[josephkirubakaran]

It works perfectly for me. Am using FireFox 6.