dragrdrop example with img inside draggable element

[praviola]

Hello,
I made a little change to dragrdrop demo by Sencha (in bundle with 'sencha-touch-1.1.0) and
I did not succeed in making it work.

The demo itself shows the basic technique for drag'n drop and let the user drag and drop a simple 'div' element.

I simply added an image (html tag 'img') to the draggable 'div' and what happens is:

when I drag the div clicking away from the img everything goes well; if I drag clicking on my img surface dragging occurs but when I release the mouse button the img does not detach from mouse pointer... ; I shall click again to trigger the drop.

The trial I did was on PC with chrome browser.

This is the code I changed inside index.html:

<div id="draggable">Draggable<img src="myimg.png" height="35px" width="35px" /><p>hello</p></div>


What was wrong? It do not know what event I should eventually catch and manage in order to make this simple demo work.

Thank you,

Paolo

[tomalex0]

Hi,

The problem you mentioned only seems to happens in Desktop Browsers.


You can try something like this to make it work

<div id="draggable" style="z-index:1000;">Draggable<img  onmousedown="if (event.preventDefault) event.preventDefault()" src="icon.png" height="35px" width="35px" /><p>hello</p></div>

[praviola]

Oh, I see...

thank you a lot. I had better try the example on the device... Ill'do soon.

Regards,
Paolo