PDA

View Full Version : Dragging a panel div and trying to dropping it inside drop target panel .



lasy
12 Oct 2012, 4:23 AM
Hello ,

I am trying to drag a panel div and drop inside a panel .The div label is draggable and showing green tick once dragged over a valid region but it is not added inside the panel .The div is not visible inside the drop target .Below is the code i am trying .It is inside 'ComponentDragAndDrop.js' file .
Ext.define('ComponentDragAndDrop', {
layoutComponent : function(dragLabel) {
var dropTarget = {
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(ddSource.el.dom.innerHTML);

return (true);
}
});
}
}
}
var ObjDragContainer = Ext.create('Ext.container.Container', {
items : [{
xtype : 'panel',
html : '<div class="drag_me1" ><b>' + dragLabel
+ '</b></div>',
width : 100,
height : 25,
itemSelector : 'div.drag_me1',
singleSelect : true,
listeners : {
render : this.initializeDragZone
}
}, {
items : dropTarget
}]
});
return ObjDragContainer;
},
initializeDragZone : function(v) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 100), 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;
}
});
}
});
I am trying to call it inside class TestDragandDropComponent.js file


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

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


var ObjDragContainer = objDisplayPage.layoutComponent('Drag me');
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:05 AM
I don't see any code where you are moving the draggable div into the drop target