PDA

View Full Version : Can't get simple drag & drop of a panel to work...



cflynn07
28 Jan 2012, 2:06 PM
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
28 Jan 2012, 2:20 PM
It works perfectly for me. Am using FireFox 6.