ExtJs: Перетаскиваемый элемент без области

Question

Я хочу создать GoogleMap как перетаскиваемый div (как в этом примере http://tech.pro/tutorial/790/javascr...in-a-container). Но с ExtJs я не нашел способ добиться этого, не избавившись от региона ...

У меня есть контейнер, который подходит для экрана, и у меня есть огромный div внутри него (более 10 000 пикселей), который центрируется (называется «областью»). Когда я создаю класс 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);