0

2013 年 9 月 11 日更新- 問題を示す完全に機能する jsFiddle を次に示します。問題を体験するには、グリッドを展開し、ネストされた行を TreePanel にドラッグしてみてください。ドラッグ要素は、TreePanel の背後にあるかのように、TreePanel によって難読化されます。リンクはこちら: http://jsfiddle.net/ZGxf5/

これは私が遭遇したちょっとしたユニークな障害です...画像で最もよく説明できると思いました：

ドラッグ アンド ドロップの苦悩

写真でわかるように、画像の左下に表示されているグリッドで使用されているプラ​​グインのプロパティをdiv介して生成された をドラッグしようとしています。要素を「つかんで」移動することはできますが、RowExpander で生成された div に制限されているように見えます。div をそれ以上左にドラッグすることも、元の位置から上にドラッグすることもできません。右のパネルに移動しようとすると、図に示すように、ドラッグする div が難読化されます。rowBodyTplRowExpander

startDrag以下のコードでわかるように、メソッド内のすべての制約を完全に排除しようとしましたが、役に立ちませんでした。私は基本的に、Sencha の5 Steps to Understanding Drag and Drop with ExtJS Blog Postで提供されているコードを使用しているだけですが、私の実装には明らかに微調整が必​​要です。

以下は、ターゲット div でドラッグを初期化するための私のコードです。

 /** 
   * 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>']
4

1 に答える 1