1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    22
    Vote Rating
    0
    cflynn07 is on a distinguished road

      0  

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

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


    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.
    Code:
    <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>

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Posts
    29
    Vote Rating
    0
    Answers
    4
    josephkirubakaran is on a distinguished road

      0  

    Default


    It works perfectly for me. Am using FireFox 6.

Thread Participants: 1

Tags for this Thread