Question

[sj_tt6]

Hi,

My page has several draggable images and a drop item. My purpose is to drag images to the drop item. My page works fine. However if I put the images under 1 or 2 other div then it stops working. The snippet is below.

<div class='class1'>
<div id='someid' class="class2">
<div id="invalid" style="display:none">Don't drag me!</div>
<img class="image" id='img_1' src='images/img1.jpg' border="0"/>
<img class="image" id='img_2' src='images/img2.jpg' border="0"/>
<img class="image" id='img_3' src='images/img3jpg' border="0"/>
<img class="image" id='img_4' src='images/img4.jpg' border="0"/>
<img class="image" id='img_5' src='images/img5.jpg' border="0"/>
</div>
</div>

and in the javascript I define:
onReady: function(){
// Create a new draggable for the div with an
// id of 'draggable'
new Ext.util.Draggable('draggable', {
revert: true
});

new Ext.util.Draggable('img_1', {
revert: true
});

new Ext.util.Draggable('img_2', {
revert: true
});
new Ext.util.Draggable('img_3', {
revert: true
});
new Ext.util.Draggable('img_4', {
revert: true
});
new Ext.util.Draggable('img_5', {
revert: true
});


Can somebody show me what I've done wrong, Thanks. (Note: The same code is working if I don't put <img>s inside <div>s)

[evant]

If that's the code you're using, then it's crashing because there's no such element with an id of 'draggable'.

Also, you should fix up the single quotes in your html.

[sj_tt6]

Yes, you're right, I forgot to put an <div id='draggable'>Drag me</div>. Even after this div is added the code is still not working. What I think is causing the problem is the code in js that create a new draggble by getting id, for instance,
new Ext.util.Draggable('img_1', {
revert: true
});

What do I specify for the image ids in that code so that draggable items (images) can be accessible if they are put inside 2 div items?

[evant]

After I fixed up your code, it ran fine:



<div class="class1">
<div id="someid" class="class2">
<div id="invalid" style="display:none">Don't drag me!</div>
<img class="image" id="img_1" src="images/img1.jpg" border="0"/>
<img class="image" id="img_2" src="images/img2.jpg" border="0"/>
<img class="image" id="img_3" src="images/img3jpg" border="0"/>
<img class="image" id="img_4" src="images/img4.jpg" border="0"/>
<img class="image" id="img_5" src="images/img5.jpg" border="0"/>
</div>
</div>




// Setup the Sencha Touch app.
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
new Ext.util.Draggable('img_1', {
revert: true
});

new Ext.util.Draggable('img_2', {
revert: true
});
new Ext.util.Draggable('img_3', {
revert: true
});
new Ext.util.Draggable('img_4', {
revert: true
});
new Ext.util.Draggable('img_5', {
revert: true
});
}
});

[sj_tt6]

Hi Evan,

Thank you for your help! The code is running now.

Cheers