2013 年 9 月 11日更新- 这是一个完整工作的 jsFiddle，演示了这个问题......要体验这个问题，展开网格并尝试将嵌套的行拖到 TreePanel。拖动元素将被 TreePanel 混淆，就好像它在它后面一样。链接在这里：http: //jsfiddle.net/ZGxf5/
这是我遇到的一个独特的障碍......我认为最好用一张图片来说明：
正如您在图片中看到的，我正在尝试拖动一个div，通过在图像左下角显示的网格中使用rowBodyTpl的插件的属性生成。RowExpander我能够“抓住”元素并移动它，但它似乎受限于 RowExpander 生成的 div。我不能将 div 向左拖动，也不能从其原始位置向上拖动。尝试将其移动到右侧的面板中会导致拖动的 div 被混淆，如图所示。
正如您将在下面的代码中看到的那样，我试图完全消除该startDrag方法中的所有约束，但无济于事。我基本上只是使用 Sencha 的5 Steps to Understanding Drag and Drop with ExtJS Blog Post中提供的代码，但它显然需要对我的实现进行一些调整。
下面是我在目标 div 上初始化 Drag 的代码。
/**
* NOTE: The following code is executed whenever
* the contents of the grid's store change
*/
var me = this, // ENTIRE left panel, including the TreePanel and lower GridPanel
divs = Ext.select('div[name=storage-item-div]', false, me.getEl().dom),
dragOverrides = {}; // provided separately, see below
Ext.each(divs.elements, function(el){
console.warn("mkaing new dd", el);
var dd = new Ext.dd.DD(el, 'storageItemDDGroup',{
isTarget: false
});
Ext.apply(dd, dragOverrides);
});
dragOverrides对象定义如下（注意我对Constrain的调试）
dragOverrides = {
b4StartDrag : function() {
// Cache the drag element
if (!this.el) {
this.el = Ext.get(this.getEl());
}
//Cache the original XY Coordinates of the element, we'll use this later.
this.originalXY = this.el.getXY();
},
startDrag: function(){
/** DEBUGGING */
_t = this;
this.resetConstraints();
this.setXConstraint(1000,1000);
this.setYConstraint(1000,1000);
},
// Called when element is dropped not anything other than a dropzone with the same ddgroup
onInvalidDrop : function() {
// Set a flag to invoke the animated repair
this.invalidDrop = true;
},
// Called when the drag operation completes
endDrag : function() {
// Invoke the animation if the invalidDrop flag is set to true
if (this.invalidDrop === true) {
// Remove the drop invitation
this.el.removeCls('dropOK');
// Create the animation configuration object
var animCfgObj = {
easing : 'elasticOut',
duration : 1,
scope : this,
callback : function() {
// Remove the position attribute
this.el.dom.style.position = '';
}
};
// Apply the repair animation
this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
delete this.invalidDrop;
}
}
最后，我认为rowBodyTpl下部网格的配置部分可能对解决问题很有用，所以这里是它的来源！
rowBodyTpl : ['<div id="OrderData-{item_id}" style="margin-left: 50px;">'+
'<tpl for="order_data">'+
'<tpl for=".">' +
'<div name="storage-item-div" class="draggable" style="padding-bottom: 5px;">' +
'<b>{quantity}</b> from Purchase Order <b>{purchase_order_num}</b> @ ${purchase_cost}' +
'<input type="button" style="margin-left: 10px;" name="storageViewOrderButton" orderid="{purchase_order_id}" value="View Order"/>' +
'</div>' +
'</tpl>' +
'</tpl>'+
'</div>']