Ext JS Examples: Drag n’ Drop buttons on a panel

December 2009 4 Ext JS Javascript

This blog entry was written following a question of an user in ExtJS forum: How to drag n’ drop a button on a panel ?

ExtJs people tend to just focus on the grid-to-grid, grid-to-listview.. sort of drag and drop, and forgot to include in their documentation a typical example of ‘drag and drop’ of a simple element like a button on a panel. Below is my implementation:

ExtJS: 3.x

Demo: Drag and Drop a button

index.html

<pre class="brush:html"><html>
<head>
<title>ExtJS – Drag n’ Drop Demo</title>
<link rel="stylesheet" type="text/css" href="../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/dd_button.js" type="text/javascript"></script>
</head>

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

dd_button.js
[/javascript]

Ext.onReady(function(){

	// Make the button Draggable inside  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) {
				// !Important: manually fix the default position of Ext-generated proxy element
				// Uncomment these line to see the Ext issue
				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) {
				// !Important: We assign the dragged element to be set to new drop position
				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
		}
	});
});

The important point of this implementation is the onDrag method

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

Try removing the function onDrag above, you’ll see this positioning issue:

Positioning Issue

Have fun,

Totti

Tags:

Share