PDA

View Full Version : Drag and drop: work out index position of dropped element



georgetintin
3 Feb 2014, 7:04 AM
I have a tpl which renders data which iterates over a nested object. E.g.,


[{
species : 'mammal',
animals : [
{
type : 'nice', animals : [
{ type : 'dog' },
{ type : 'cat' },
{ type : 'hamster' }
]
}, {
type : 'stripy', animals : [
{ type : 'tiger' }
]
}
]
}]

I have the drag and drop working so you can drag, for instance, "tiger", into the "nice" category. However, I would also like to be able to arrange the animals in the "nice" category. I'm a bit puzzled at how I can achieve this. Some example code below, thanks!


// Drag
view.dragzone = Ext.create('Ext.dd.DragZone', view.getEl(), {
ddGroup : 'animal',

getDragData: function(e) {
var sourceEl = e.getTarget(view.dragSelector), d;

if (sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();

return (view.dragData = {
sourceEl : sourceEl,
ddel : d,
animalData : e.getTarget(false, false, true).dom.dataset,
repairXY : Ext.fly(sourceEl).getXY()
});
}
},

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

// Drop
view.dropzone = Ext.create('Ext.dd.DropZone', view.el, {
ddGroup : 'animal',

getTargetFromEvent: function(e) {
return e.getTarget('.animal-list');
},

onNodeDrop : function(target, dd, e, data) {
// Only an example pushing to store
// @todo How can I work out where in the list this element was dragged?
view.getStore().push({
type : data.animalData.type
});
}
});

mitchellsimoens
6 Feb 2014, 12:57 PM
If you get the direct parent of where the element was dropped, you can then find the index of the element within that parent.