DropTarget Ext Window

Question

我需要爲Ext Window實現放置目標。窗口可以放在任何地方，但當它們被放入DropZone內時，我需要調用一個函數來改變它的佈局。問題是不會調用放置事件。

下面是如何定義的放置目標（它是一個浮動面板，下面稱爲initComponent代碼）：

 


    this.on('render', function(w) { 
       w.dropTarget = Ext.create('Ext.dd.DropTarget', w.getEl()); 
       w.dropTarget.nofifyDrop = function(source, evt, data) { 
        console.log('notifyDrop'); 
       }; 

       w.dropTarget.notifyEnter = function() { 
        console.log('notifyEnter'); 
       }; 
      },this); 

下面是如何定義放置源。當窗口具有可拖動的配置，然後它有一個我試圖配置

 

    listeners:{ 
        scope:this, 
        close:function(w) { 
         this.removeWindow(w); 
        }, 
        show:function(w) { 
         console.log('win', w.dd); 
         w.dd.afterValidDrop = function() { 
          console.log('after valid drop'); 
         } 
         w.dd.onDragDrop = function() { 
          console.log('on drag drop'); 
         } 
         w.dd.onStartDrag = function() { 
          console.log('starting drag'); 
         } 
        }, 

DD財產的問題是，沒有一個函數被調用，沒有動作登錄到控制檯。當我從窗口切換到具有浮動和可拖動配置的面板時，則會調用DropTarget中的事件（notifyDrop和notifyEnter），但面板事件不會。如何正確配置拖動&拖放窗口可拖動配置或者有更好的方式來實現我所需要的。

我也試圖爲窗口或面板禁用拖動和指定的DropTarget和DragSource上自己：

的DropTarget現在有ddGroup：

 

    this.on('render', function(w) { 
     w.dropTarget = Ext.create('Ext.dd.DropTarget', w.getEl(),{ 
      ddGroup:'winDDGroup', 
      notifyDrop:function(source, evt, data) { 

      }, 
      notifyEnter:function() { 
       console.log('notifyEnter'); 
      } 
     }); 
    },this); 

並拖動源（分機窗口）：

 

    var overrides = { 
        startDrag: function(e) { 
         console.log('starting drag'); 
         //shortcut to access our element later 
         if (!this.el) { 
          this.el = Ext.get(this.getEl()); 
         } 
         //add a css class to add some transparency to our div 
         this.el.addCls('selected'); 
         //when we drop our item on an invalid place we need to return it to its initial position 
         this.initialPosition = this.el.getXY(); 
        }, 
        onDrag: function(e) { 
         //this.el.moveTo(e.getPageX() - 32, e.getPageY() - 32); 
        }, 
        onDragEnter: function(e, id) { 
         console.log('onDragEnter', id); 
         Ext.fly(id).addCls('valid-zone'); 
        }, 
        onDragOver: function(e, id) { 
         console.log('onDragOver', id); 
         Ext.fly(id).addCls('valid-zone'); 
        }, 
        onDragOut: function(e, id) { 
         console.log('onDragOut'); 
        }, 
        onDragDrop: function(e, id) { 
         console.log('on drag Drop'); 
         // change the item position to absolute 
         this.el.dom.style.position = 'absolute'; 
         //move the item to the mouse position 
         this.el.moveTo(e.getPageX() - 32, e.getPageY() - 32); 
         Ext.fly(id).removeCls('valid-zone'); 

        }, 
        onInvalidDrop: function() { 
         console.log('invalid drop'); 
         this.el.removeCls('valid-zone'); 
         //this.el.moveTo(this.initialPosition[0], this.initialPosition[1]); 
        }, 
        endDrag: function(e, id) { 
         console.log('end drag'); 
         this.el.removeCls('selected'); 
         //Ext.fly(id).removeCls('drop-target'); 
         //this.el.highlight(); 
        } 
       }; 

    .... 

       listeners:{ 
        scope:this, 
        close:function(w) { 
         this.removeWindow(w); 
        }, 
        render:function(w) { 
         var dd = Ext.create('Ext.dd.DragSource', w.getEl(), { 
          ddGroup:'winDDGroup', 
          //isTarget: false 
         }); 

         Ext.apply(dd, overrides); 
        }, 
    } 

現在，當我開始拖動窗口事件被觸發但拖動窗口拖放區域沒有任何效果。 DropTarget事件不會被解僱。

編輯：當我再次從窗口切換到面板然後從源和目標事件被觸發。我仍然需要拖動來源是窗口。

Answer 1

我試圖操縱代理並拖動手柄，可以幫助時也有類似的問題。 也許你應該看看DragTracker或DragDrop組件。 Dragtracker將爲您提供dragstart和drag end等事件，您可以使用它來實現您的drop邏輯。

這是我的粗略實現（面板，但也許它會幫助，我真的不能考慮它在大深度）

//add the listener to afterrender, possibly other 
window.on('afterrender', me._setupDragDrop, window); 

//do your magic 
_setupDragDrop : function(win){ 
     win.dd = new Ext.dd.DragDrop(win.id); 
     win.dd.setHandleElId(win); 
      win.dragTracker = new Ext.dd.DragTracker({ 
       onBeforeStart: function(e) { 
        //do stuff 
       }, 
       onStart: function(e) { 
        //do stuff 
       }, 
       onDrag: function(e) { 
        //do stuff 
       }, 
       onEnd: function(e) { 
        //do stuff 
       } 
      }); 
      win.dragTracker.initEl(win.el); 
    }, 

希望這有助於。