PDA

View Full Version : Trying Drag and drop button component in extjs 4.1.Need to drag only clone of button.



lasy
15 Oct 2012, 3:44 AM
Hello ,
I am trying to drag and drop button component in extjs 4.1 .Here it is dragging the clone as well as the original button component .I need to drag the image of the button and the button should be fix on the orginal postion .And if it is not a valid target (where to drop ) it will repostion to the original place .If it is valid then dropped the target place but the original dragggable component should be there .

In below code If it is a valid region it is drooping the button and the original button component be there .If i am trying to drag the button the image as well as the original button is moving (i need only the image of button to move ) and if not a valid region the image is repostion but the original component is invisible .Please find below code for the same .If anyone know the answer please reply asap .It is inside the file ComponentDragAndDrop
Ext.define('ComponentDragAndDrop', { layoutComponent : function(buttonObj) {


var buttonObj = Ext.create(Ext.button.Button, {
text : '<html><div class="drag_me1">Drag me</div> </html>',
draggable : true,
itemSelector : 'div.drag_me1',
singleSelect : true,
listeners : {
render : this.initializeDragZone
}
});

var dropTarget = Ext.create(Ext.panel.Panel, {
height : 300,
bodyStyle : 'padding: 30px; font-size: 16px; color: #00AE00;',
html : 'Drop target ',
listeners : {
render : function(cmp) {
debugger;
var sourcePanelDropTarget = new Ext.dd.DropTarget(
cmp.body.dom, {
notifyDrop : function(ddSource, e, data) {
cmp.body.highlight("00AE00");
cmp.add(buttonObj.cloneConfig());
return (true);
}
});
}
}
});
var mainContainer = Ext.create('Ext.container.Container', {
width : 700,
height : 700,
title : '',
border : 1,
renderTo : Ext.getBody(),
layout : {
type : 'hbox'
},
items : [{
xtype : buttonObj
}, {
items : dropTarget
}]
});
},
initializeDragZone : function(v) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl : sourceEl,
repairXY : Ext.fly(sourceEl).getXY(),
ddel : d
};
}
},
getRepairXY : function() {
return this.dragData.repairXY;
}
});
}
});



calling from test.js file



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

var objDisplayPage = Ext.create('ComponentDragAndDrop');


var ObjDragContainer = objDisplayPage.layoutComponent();
/*var mainContainer = Ext.create('Ext.panel.Panel', {
width: 700,
height: 700,
title: '',
renderTo: Ext.getBody(),
layout : {
type : 'absolute'
},
items:[
{
xtype :ObjDragContainer
}
]
});*/




});

mitchellsimoens
22 Oct 2012, 7:21 AM
First, when you drag the button you want the button to stay visible where it was and only have the clone dragged?

lasy
30 Oct 2012, 8:12 PM
yes.I need the button visible.Only the clone should move.Below i am specified my latest code .Where i am trying to making my button ,panel dragble and dropping it into inside a panel .it is working fine .But i need the draggable components be there(in the original postion ) and only the clone will move .
pls find below the same code.


var panelObj;
var dropTarget ;
var panelObj2;
var dropTarget2;
var panelObj3

Ext.define('ComponentDragAndDrop', {
layoutComponent : function(dragLabel) {
panelObj = Ext.create(Ext.button.Button, {

id : 'dragID',
title :'Drag Panel1',
text :'This is button ',
//width : 100,
//height : 70,
listeners : {
render : this.initializeDragZone
}
});

panelObj2 = Ext.create(Ext.panel.Panel, {

id : 'dragID2',
title :'Drag panel2',
html :'This is panel2 ',
width : 100,
height : 70,
listeners : {
render : this.initializeDragZone
}
});

panelObj3 = Ext.create(Ext.panel.Panel, {

id : 'dragID3',
title :'Drag Panel3',
html :'This is panel 3 ',
width : 100,
height : 70,
listeners : {
render : this.initializeDragZone
}
});

dropTarget = Ext.create(Ext.panel.Panel, {
height : 500,
width :500,
id :'dropID',
bodyStyle : 'padding: 30px; font-size: 16px; color: #00AE00;',
html : 'Drop target for panel 1 '

});
dropTarget2 = Ext.create(Ext.panel.Panel, {
height : 700,
width :700,
id :'dropID2',
bodyStyle : 'padding: 30px; font-size: 16px; color: #00AE00;',
html : 'Drop target for panel 2 '

});
var ObjDragContainer = Ext.create('Ext.panel.Panel', {
layout : {
type : 'hbox'
},
items : [{
xtype : panelObj
},
{
xtype :panelObj2
},{
xtype :panelObj3
},{
xtype : dropTarget
},

{
xtype : dropTarget2
}
]
});
return ObjDragContainer;
},

initializeDragZone : function(v) {
debugger;
var overrides = {
// Only called when element is dragged over the a dropzone with the same ddgroup

//Called when mousedown for a specific amount of time
b4StartDrag : function() {
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//this.el.highlight();
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
// Called when element is dropped not anything other than a
// dropzone with the same ddgroup

onInvalidDrop : function() {
//alert(" invalid drop ");
this.invalidDrop = true;

},
endDrag : function() {
if (this.invalidDrop === true) {
//alert(" Invalid Drag ");

var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
this.el.dom.style.position = '';
}
};
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}
},

// Called upon successful drop of an element on a DDTarget with the same
onDragDrop : function(evtObj, dropID) {
debugger;
// Wrap the drop target element with Ext.Element
var dropEl = Ext.get(dropID);
// var targetElId='dropID';
// Perform the node move only if the drag element's parent is not the same as the drop target
if (this.el.dom.parentNode.id != dropID) {

// Move the element
dropEl.appendChild(this.el);

// Remove the drag invitation
this.onDragOut(evtObj, dropID);

// Clear the styles
// this.el.dom.style.position ='';
//this.el.dom.style.top = '';//this.el.dom.offsetTop;
this.el.dom.style.left ='';// this.el.dom.offsetLeft;
}
else {
debugger;
// This was an invalid drop, lets call onInvalidDrop to initiate a repair

this.onInvalidDrop();
}
}
};
debugger;
var dragObj = Ext.get('dragID');

var dd = new Ext.dd.DD(dragObj, 'dragDDGroup', {
isTarget : false
});
Ext.apply(dd, overrides);

var dragObj2 = Ext.get('dragID2');
var dd = new Ext.dd.DD(dragObj2, 'dragDDGroup2', {
isTarget : false
});
Ext.apply(dd, overrides);

var dragObj3 = Ext.get('dragID3');
var dd = new Ext.dd.DD(dragObj3, 'dragDDGroup', {
isTarget : false
});
Ext.apply(dd, overrides);


//Instantiate instances of Ext.dd.DDTarget for the panel
var dragDDTarget = new Ext.dd.DDTarget('dragID','dragDDGroup');
var dragDDTarget2 = new Ext.dd.DDTarget('dragID2','dragDDGroup2');
var dragDDTarget3 = new Ext.dd.DDTarget('dragID3','dragDDGroup');

//Instantiate instnaces of DDTarget for the drop target elements
var dropDDTarget = new Ext.dd.DDTarget('dropID', 'dragDDGroup');
var dropDDTarget2 = new Ext.dd.DDTarget('dropID2', 'dragDDGroup2');

// dropDDTarget.addToGroup('dragDDGroup3');


}
});

lasy
30 Oct 2012, 8:15 PM
yes.I need the button visible.Only the clone should move.Below i am specified my latest code .Where i am trying to making my button ,panel dragble and dropping it into inside a panel .it is working fine .But i need the draggable components be there(in the original postion ) and only the clone will move .<BR>pls find below the same code.<BR><BR><BR>
<P>&nbsp;var panelObj;<BR>&nbsp; var dropTarget ;<BR>&nbsp; var panelObj2;<BR>&nbsp; var dropTarget2;<BR>&nbsp; var panelObj3<BR>&nbsp;<BR>Ext.define('ComponentDragAndDrop', {</P>
<P>&nbsp;layoutComponent : function(dragLabel) {</P>
<P>&nbsp;&nbsp; panelObj = Ext.create(Ext.button.Button, {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id : 'dragID',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title :'Drag Panel1',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text :'This is button ',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//width : 100,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//height : 70,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listeners : {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render : this.initializeDragZone<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;});<BR>&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp; panelObj2 = Ext.create(Ext.panel.Panel, {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id : 'dragID2',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title :'Drag panel2',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html :'This is panel2 ',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width : 100,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height : 70,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listeners : {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render : this.initializeDragZone<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;});<BR>&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;panelObj3 = Ext.create(Ext.panel.Panel, {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id : 'dragID3',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title :'Drag Panel3',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html :'This is&nbsp; panel 3 ',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width : 100,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height : 70,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listeners : {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render : this.initializeDragZone<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;});<BR>&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp; dropTarget = Ext.create(Ext.panel.Panel, {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height : 500,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width :500,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id :'dropID',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bodyStyle : 'padding: 30px; font-size: 16px; color: #00AE00;',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html : 'Drop target for panel 1 '<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;});<BR>&nbsp;&nbsp;&nbsp;&nbsp;dropTarget2 = Ext.create(Ext.panel.Panel, {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height : 700,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width :700,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id :'dropID2',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bodyStyle : 'padding: 30px; font-size: 16px; color: #00AE00;',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html : 'Drop target for panel 2 '<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;});</P>
<P>&nbsp;&nbsp;var ObjDragContainer = Ext.create('Ext.panel.Panel', {<BR>&nbsp;&nbsp;&nbsp;layout : {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type : 'hbox'<BR>&nbsp;&nbsp;&nbsp;&nbsp;},<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;items : [{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xtype : panelObj</P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xtype :panelObj2<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xtype :panelObj3<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xtype : dropTarget<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xtype : dropTarget2<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<BR>&nbsp;&nbsp;&nbsp;&nbsp;});</P>
<P>&nbsp;&nbsp;return ObjDragContainer;<BR>&nbsp;},&nbsp;<BR>&nbsp;&nbsp;</P>
<P>&nbsp;initializeDragZone : function(v) {<BR>&nbsp;&nbsp;debugger;<BR>&nbsp;&nbsp; var overrides = {<BR>&nbsp;&nbsp;&nbsp; // Only called when element is dragged over the a dropzone with the same ddgroup<BR>&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;//Called when mousedown for a specific amount of time<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b4StartDrag : function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!this.el) {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.el = Ext.get(this.getEl());<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //this.el.highlight();<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //Cache the original XY Coordinates of the element, we'll use this later.<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.originalXY = this.el.getXY();<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Called when element is dropped not anything other than a<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // dropzone with the same ddgroup<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onInvalidDrop : function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;//alert(" invalid drop ");<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.invalidDrop = true;<BR>&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; endDrag : function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (this.invalidDrop === true) {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //alert(" Invalid Drag ");<BR>&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var animCfgObj = {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; easing&nbsp;&nbsp; : 'elasticOut',<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; duration : 1,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scope&nbsp;&nbsp;&nbsp; : this,<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callback : function() {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.el.dom.style.position = '';<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; delete this.invalidDrop;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },<BR>&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Called upon successful drop of an element on a DDTarget with the same<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onDragDrop : function(evtObj, dropID) {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;debugger;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Wrap the drop target element with Ext.Element<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dropEl = Ext.get(dropID);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // var targetElId='dropID';<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Perform the node move only if the drag element's parent is not the same as the drop target<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (this.el.dom.parentNode.id != dropID) {<BR>&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Move the element<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dropEl.appendChild(this.el);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Remove the drag invitation<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.onDragOut(evtObj, dropID);<BR>&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Clear the styles<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // this.el.dom.style.position ='';<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //this.el.dom.style.top = '';//this.el.dom.offsetTop;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.el.dom.style.left ='';// this.el.dom.offsetLeft;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;debugger;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // This was an invalid drop, lets call onInvalidDrop to initiate a repair<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.onInvalidDrop();<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;};&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp; debugger;<BR>&nbsp;&nbsp;var dragObj = Ext.get('dragID');<BR>&nbsp;&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dd = new Ext.dd.DD(dragObj, 'dragDDGroup', {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; isTarget&nbsp; : false<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ext.apply(dd, overrides);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dragObj2 = Ext.get('dragID2');<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dd = new Ext.dd.DD(dragObj2, 'dragDDGroup2', {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; isTarget&nbsp; : false<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ext.apply(dd, overrides);<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dragObj3 = Ext.get('dragID3');<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var dd = new Ext.dd.DD(dragObj3, 'dragDDGroup', {<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; isTarget&nbsp; : false<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ext.apply(dd, overrides);<BR>&nbsp;<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp; //Instantiate instances of Ext.dd.DDTarget for the panel <BR>&nbsp;&nbsp;&nbsp; var dragDDTarget&nbsp;&nbsp;&nbsp; = new Ext.dd.DDTarget('dragID','dragDDGroup');<BR>&nbsp;&nbsp;&nbsp; var dragDDTarget2&nbsp;&nbsp;&nbsp; = new Ext.dd.DDTarget('dragID2','dragDDGroup2');<BR>&nbsp;&nbsp;&nbsp; var dragDDTarget3&nbsp;&nbsp;&nbsp; = new Ext.dd.DDTarget('dragID3','dragDDGroup');<BR>&nbsp;<BR>&nbsp;&nbsp;&nbsp; //Instantiate instnaces of DDTarget for the drop target elements<BR>&nbsp;&nbsp;&nbsp; var dropDDTarget = new Ext.dd.DDTarget('dropID', 'dragDDGroup');<BR>&nbsp;&nbsp;&nbsp; var dropDDTarget2 = new Ext.dd.DDTarget('dropID2', 'dragDDGroup2');<BR>&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp; // dropDDTarget.addToGroup('dragDDGroup3');<BR>&nbsp;&nbsp;&nbsp; <BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <BR>&nbsp;}</P>
<P>});<BR></P><BR><BR>