EXTJS Drag&Drop Images inside Panel

Question

i was trying to drag and drop an image inside a panel of extjs. but it didnt work. Just want to drag and drop elements like in the draggable demos of jquery. Is there an easy solution cause i didn't found.

thanks in advance, cheers, Thomas

I am sorry ChrisR, forgot the code. Well i tried it in that way:

panel(with html code of an image) inside a panel. dreagable = true. But i cant drag an drop it like to position XY.

Ext.createWidget('panel', {
renderTo: 'panel1',
width: 500,
height: 500,
    items: [
{
    xtype: 'panel',
    title: 'My Panel',
    width: 150,
    height: 150,
        draggable: true,
        html: '<img id="resizeImg" src="avus_gtr.jpg" style="width: 100%; height: 100%;"></img>'
}]

We really need more info if you want help, do you have some example code or can you elaborate why it doesn't work? — ChrisR

ChrisR ChrisR · Accepted Answer · 2011-03-01T16:01:04

You realize you are adding an image into a panel which is draggable and insert that panel again into your main panel? It isn't the image you are making draggable, it's the panel that the image sits in which is draggable but still the code you posted looks totally wrong.

I suggest you read up on ExtJS DD first to grasp the concepts of Drag and Drop in ExtJS and how that is implemented in default Components like Panels. The way of using DD on an Ext Panel is totally different than making an image draggable. A Panel is an Ext Component with alot of built in features like DD but an image is just a DOM element on which you should implement your DD behaviour yourself.

Check the following links, they have some good info on DD in ExtJS

And ofcourse the docs for Ext.dd: http://dev.sencha.com/deploy/dev/docs/?class=Ext.dd.DragDrop

EXTJS Drag&Drop Images inside Panel

1 Answers