Question

更新9/11/13 - 这是一个完全正常工作的jsFiddle演示问题...体验问题，展开网格并尝试将嵌套行拖到TreePanel上。 TreePanel将对drag元素进行模糊处理，就好像它在它后面一样。点击此处：http://jsfiddle.net/ZGxf5/

这是我遇到的一个独特障碍......我认为最好用图片说明：

Drag and Drop Woes

正如您在图片中看到的那样，我正在尝试拖动div，通过左下方显示的网格中使用的rowBodyTpl插件的RowExpander属性生成图片。我能够“抓住”元素并移动它，但它似乎受限于RowExpander生成的div。我不能再向左拖动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>']

Answer 1

我能够在小提琴中使用它，但我必须切换RowExpander模板而不是呈现Ext.view.View而不是我之前使用的div。使用Ext.view.View允许我基本上只是按照Sencha演示使用DragZone和DropZone ..有点希望它不是那么复杂但是嘿，那就是它有时是怎样的，我猜测。

请使用DragZone和DropZone查看非常凌乱 jsFiddle源代码，以便根据自己的需要进行调整：http://jsfiddle.net/knppJ/

同样，这里的问题是将嵌套div 从 RowExpander 生成的 gridpanel 内的行拖到单独的相邻行面板。我遇到的问题在上面的问题中有详尽的描述。我无法按照我想要的方式定期div工作，因此我最终使用Ext.view.View代替网格。这需要在onbodyexpand插件触发的RowExpander事件中添加一些额外的逻辑，基本上只需将Ext.view.View呈现给div生成的RowExpander

ExtJS 4.1 - 使用RowExpander问题拖放

1 个答案: