ExtJs：無區域可拖動元素

Question

我想創建一個像可拖動div的GoogleMap（如本例http://tech.pro/tutorial/790/javascr...in-a-container）。 但與ExtJs我沒有找到一種方式來實現這一點，沒有擺脫該地區...

我有一個容器適合屏幕，我有一個巨大的div裏面（超過10萬像素）居中（稱爲「區域」）。 當我用這個「area」元素創建一個Ext.dd.DD類作爲目標，並開始拖動... DragDrop的功能不起作用，因爲div被卡在左上角。

有關如何實現這一點的任何想法？
（顯然，我不想scoll，但拖放滾動）。

由於提前，
PsychoKrameur

PS：我使用ExtJS的5.1

Answer 1

隨着ExtJS的5.1可以使用TouchScroller，但要小心的類是私有的。這意味着它可以在更多版本中更改。

例子：https://fiddle.sencha.com/#fiddle/lmn

document.addEventListener("dragstart", function(e) { 
    e.preventDefault(); //This for the image otherwise it will dragged in IE 
}); 

var panel = Ext.create("Ext.Panel", { 
    style: { 
     cursor: "move" 
    }, 
    width: 400, 
    height: 400, 
    items: [{ 
     xtype: "image", 
     width: 1019, 
     height: 1019, 
     src: "http://tech.pro/_sotc/sites/default/files/202/images/duck.jpg" 
    }], 
    renderTo: Ext.getBody() 
}); 



Ext.defer(function() { 
    var childSize = panel.items.first().getSize(); 
    var size = panel.getSize(); 

    var scroller = Ext.scroll.TouchScroller.create({ 
     element: panel.getOverflowEl() 
    }); 

    scroller.scrollTo(size.width/2 - childSize.width/2, size.height/2 - childSize.height/2); //center the image 
}, 1);