PDA

View Full Version : Can't get drag & drop to work properly



cflynn07
27 Jan 2012, 5:16 PM
I'm attempting to learn extjs 4 and I've been struggling with drag and drop for the past couple of days. I've attempted to build a simple application with a viewport and 1 panel. I've set the panel to be draggable: true and the viewport to be a dropzone. When I try and drag the panel around the viewport it jumps erratically.

This is a short video clip of the behavior:
http://youtu.be/6WRf5j_CAR0

These are my two files:
app.js

Ext.Loader.setConfig({
enabled: true
});

Ext.application({
name: 'CS',

appFolder: 'ccms/app',
autoCreateViewport: true,

controllers: [
// 'TestCreator',
// 'Primary',
// 'Manager'
],

launch: function(){

var viewport = Ext.ComponentQuery.query('viewport');

if(viewport.length > 0)
viewport[0].add([{
xtype: 'panel',
width: 300,
height: 300,
draggable: true
}]);

}
});

Viewport.js

Ext.define('CS.view.Viewport', {
extend: 'Ext.container.Viewport',
// layout: 'fit',

listeners: {
render: function(sender){

console.log(sender);

sender.dropZone = new Ext.dd.DropZone(sender.container, {

getTargetFromEvent: function(e) {

console.log('getTargetFromEvent');

var temp = {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};

console.log(temp);
return temp;

},

// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
// Ext.fly(target).addCls('my-row-highlight-class');
},

// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
// Ext.fly(target).removeCls('my-row-highlight-class');
},

onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},

onNodeDrop : function(target, dd, e, data){

console.log('onNodeDrop');
data.panel.setPosition(target.x, target.y, true);
return true;

}
});



}
}

})



index.html


<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cobar Systems Continuity Suite</title> <link rel="stylesheet" type="text/css" href="http://themis.dev/ccms/resources/css/ext-all.css (http://www.sencha.com/forum/view-source:http://themis.dev/ccms/resources/css/ext-all.css)"> <script type="text/javascript" src="http://themis.dev/ccms/extjs/bootstrap.js (http://www.sencha.com/forum/view-source:http://themis.dev/ccms/extjs/bootstrap.js)"></script> <script type="text/javascript" src="http://themis.dev/ccms/app.js (http://www.sencha.com/forum/view-source:http://themis.dev/ccms/app.js)"></script>
</head> <body> </body> </html>

Can anyone tell me what is going on?

I've tried this with Ext JS 4.07 and the 4.1 Beta, same results