EXTJS Drag&Drop Images inside Panel

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>'
}]

---

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

• http://rowen.javaeye.com/blog/479133
• http://examples.extjs.eu/?ex=freedrag
• http://www.extensions.extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_1

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