Extjs - drag drop restriction

Question

How do I restrict the drag operation not exceeding certain boundary. Is there any config in extjs (version 3), I saw that, Ext.dd.DragZone class is used. But Im not sure what is the usability. I saw a method dropNotAllowed. Is that the method, that has to be used? if so, how should I use that? Please provide some examples.

Im looking for something similar to (jquery UI's draggable containment property)

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.dd.DragZone-cfg-dropNotAllowed

I tried using the set X and Y constraints, but it did not work-out:

abc.prototype.initDrag = function(v) {
    v.dragZoneobj = new Ext.dd.DragZone(v.getEl(), {
                getDragData : function(e) {
                    var sourceEl = e.getTarget(v.itemSelector, 10);
//                    sourceEl.setXConstraint( 0, 10 );
                    var t = e.getTarget();
                    var rowIndex = abc.grid.getView().findRowIndex(t);
                    var columnIndex = abc.grid.getView().findCellIndex(t);
                    if ((rowIndex !== false) && (columnIndex !== false)) {
                        if (sourceEl) {
                            abc.isDragged = true;
                            abc.scriptGrid.isDraggableForObject = false;
                            abc.scriptGrid.dragRowIndex = false;
                            d = sourceEl.cloneNode(true);
                            d.id = Ext.id();
                            d.textContent = sourceEl.innerHTML;
//                            d.setXConstraint( 0, 10 );
//                            d.setYConstraint( 0, 10 );
                            return {
                                ddel : d,
                                sourceEl : d,
                                sourceStore : v.store
                            }
                        }
                    }   
                },
                getRepairXY : function() {
                    return this.dragData.repairXY;
                },          
            });
}

Both are commented in the above code. The above code is initiated when the panel is rendered.

edit: How these setX and setYcontraints have to be used?

Answer 1

By default, the element can be dragged any place on the screen. In the doc there are two methods setXConstraint( iLeft, iRight, iTickSize) and setYConstraint( iUp, iDown, iTickSize ) These two methods is used to set to limit the vertical travel and horizental travel of the element.