PDA

View Full Version : Dragging a button



smartjo
17 Dec 2009, 8:01 PM
Hi,
I'm trying to drag button in panel. Is it possible in ExtJS3. Pls give a guidance or a sample snippet for that.

Pls help.

Regards
Joe

tot2ivn
18 Dec 2009, 1:44 AM
Hi,
I'm trying to drag button in panel. Is it possible in ExtJS3. Pls give a guidance or a sample snippet for that.

Pls help.

Regards
Joe

Hi Joe,

I've written for your a quick example of dragging a button in a panel.

HTML file


<html>
<head>
<title>ExtJS - Drag n' Drop Demo</title>
<link rel="stylesheet" type="text/css" href="../../ext-3.0.3/resources/css/ext-all.css" />
<script src="js/ext-base.js" type="text/javascript"></script>
<script src="js/ext-all.js" type="text/javascript"></script>

<script src="js/playground.js" type="text/javascript"></script>
</head>

<body>
<div id="canvas">
</div>
</body>
</html>

Javascript file: playground.js


Ext.onReady(function(){

// Make the button Draggable inside <body> tag
var initDragZone = function(v) {

v.dragZone = new Ext.dd.DragZone(Ext.getBody(), {
getDragData: function(e) {
// .button-draggable == class of the button you want to drag around
if(sourceEl = e.getTarget('.button-draggable')) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d
}
}
},

onDrag: function(e) {
// Manually fix the default position of Ext-generated proxy element
// Uncomment these line to see the effect
var proxy = Ext.DomQuery.select('*', this.getDragEl());
proxy[2].style.position = '';
},

getRepairXY: function() {
return this.dragData.repairXY;
}
});
};

// Make the panel droppable to the button
var initDropZone = function(g) {
g.dropZone = new Ext.dd.DropZone(g.body, {

getTargetFromEvent: function(e) {
return e.getTarget('#canvas');
},

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

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

if(dragEl = Ext.get(data.sourceEl)) {
dragEl.setXY([e.getPageX(),e.getPageY()]);
}

return true;
}

});
};

// Make the Panel Droppable
var myPanel = new Ext.Panel({
width: 500,
height: 300,
renderTo: 'canvas',
bodyStyle: { background: 'yellow' },
html: 'Drop your button here',
listeners: {
render: initDropZone
}
});

var myButton = new Ext.Button({
width: 30,
height: 20,
cls: 'button-draggable',
text: "Drag me",
renderTo: Ext.getBody(),
listeners: {
render: initDragZone
}
});
});

Cheers :D

Totti