ExtJs：没有区域的可拖动元素答案

【问题标题】：ExtJs: Draggable element without RegionExtJs：没有区域的可拖动元素
【发布时间】：2015-04-22 09:58:55
【问题描述】：

我想创建一个类似于可拖动 div 的 GoogleMap（如本例中的 http://tech.pro/tutorial/790/javascr...in-a-container）。但是对于 ExtJs，我没有找到一种方法来实现这一点而不摆脱区域......

我有一个适合屏幕的容器，里面有一个巨大的 div（超过 10 000 像素），居中（称为“区域”）。当我以这个“区域”元素为目标创建Ext.dd.DD 类并开始拖动时...... DragDrop 功能不起作用，因为 div 卡在左上角。

知道如何实现这一目标吗？
（显然，我不想要 scoll，而是拖放滚动）。

提前致谢，
心理学家

PS：我使用的是 ExtJs 5.1

【问题讨论】：

标签： google-maps extjs drag-and-drop draggable

【解决方案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);

【讨论】：

非常感谢！额外的问题......我怎样才能使图像居中并保持良好的拖动功能正常工作？
非常感谢。这工作完美。我牢记警告