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

Question

我想创建一个类似可拖动的 GoogleMap div（如本例 http://tech.pro/tutorial/790/javascr...in-a-container）。但是对于 ExtJs，我没有找到在不摆脱 Region 的情况下实现这一目标的方法...

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

知道如何实现吗？
（很明显，我不要scoll，而是拖放滚动）。

提前致谢，
PsychoKrameur

PS: 我正在使用 ExtJs 5.1

Answer 1

在 ExtJS 5.1 中，您可以使用 TouchScroller，但要注意 class 是私有的。这意味着它可以在以后的版本中更改。

示例：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);

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

ExtJs: Draggable element without Region

google-maps

drag-and-drop

extjs

draggable