Question

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

我有一个适合屏幕的容器，里面有一个巨大的div（超过10 000 px），它居中（称为“区域”）。当我用这个“area”元素作为目标创建一个Ext.dd.DD类，然后开始拖动... DragDrop fonctionnality不起作用，因为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);

ExtJs：没有Region

1 个答案: