在Extjs中,我想知道是否可以限制在特定的x,y坐标中拖动元素,就像jQuery-UI中的选项,包含一样。
目前这是我的代码:
abc.prototype.initDrag = function(v) {
v.dragZone = new Ext.dd.DragZone(v.getEl(), {
containerScroll : false,
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
var abcDragZone = v.dragZone ; //Ext.getCmp('idabcDragZone');
var widthToScrollV = $(window).width()-((columnIndex-1)*100);
var widthToScrollH = $(window).height()-((5-rowIndex)*30);
abcDragZone.setXConstraint(0,widthToScrollV);
abcDragZone.setYConstraint(widthToScrollH,0);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
def.scriptGrid.isDraggableForObject = false;
def.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = "\$" + abc.grid.getColumnModel().getColumnHeader(columnIndex);
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
但问题是当csv表添加到DOM时会调用initdrag。只有当它添加了那个元素才能被访问并且单个单元格才能被访问。可以设置拖动限制。所以一旦我添加了一个csv,限制就没有设置好。如果我再次将它添加到DOM,那么限制可以工作。有没有像draggable的jQuery UI包含这样的选项,这里是extjs?
编辑: 我甚至尝试过:
constrainTo( constrainTo, [pad], [inContent] )
body的id为#abc 当我尝试
dragZoneObj.startDrag = function(){
this.constrainTo('abc');
};
这是DragZone类的一种方法。它仍然没有涵盖整个身体标签。