Extjs move an image over a panel

Question

I have an image on a panel, the image is draggable=true, I want to move the image and change it's position (x,y), when moving the image I want it to be moved ONLY inside it's parent panel and can't be moved outside the panel, I use this function, it's work but the image can be moved outside the panel ?!

function initializePatientDragZone(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,
                patientData: v.getRecord(sourceEl).data
            });
        }
    },
    getRepairXY: function() {
        return this.dragData.repairXY;
    }
});

}

Answer 1

You can call constrainTo method on the drag zone.