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); 
    }, 

希望这有助于。