PDA

View Full Version : Drag and Drop with multiple destinations



delacha
1 Dec 2011, 7:51 AM
I try to createa panel withthreeimages andthreelockers.Each imageshould be storedin the lockerthat suits him.
Based onthe example givenin the documentationI triedto generalizethe problem.
Butmy programdoesnot properlyfocntionneas only thethirdrecordagrees to receivethe image.In the first two,draggableareaback toits origin.
I workhere withversion 1.1 ofTouch.

Thanks for your help

Here is the code (except styles)


<script type="text/javascript">

Ext.setup({
fullscreen:true,
onReady: function() {

i1 = new Ext.util.Draggable ('image1',
{
group:'boites',
revert:true
});
i2 = new Ext.util.Draggable ('image2',
{
group:'boites',
revert:true
});
i3 = new Ext.util.Draggable ('image3',
{
group:'boites',
revert:true
});

b1 = new Ext.util.Droppable('boite1',
{
validDropMode:'contains',
group:'boites',
listeners: {
drop: function (droppable,draggable,e) {
draggable.el.setHTML('Merci');
}
}
});

b2 = new Ext.util.Droppable('boite2',
{
group:'boites',
validDropMode:'contains',
listeners: {
drop: function (droppable,draggable,e) {
draggable.el.setHTML('Tres Bien');
}
}
});
b3 = new Ext.util.Droppable('boite3',
{
group:'boites',
validDropMode:'contains',
listeners: {
drop: function (droppable,draggable,e) {
draggable.el.setHTML('Ok');
}
}
});

}
});

</script>

</head>
<body>
<h2>Range les photos dans les bonnes cases</h2>
<table class="tableau">
<tr>
<td>
<div class="draggable" id="image1"><img src="pictures/OieB.jpg" width="100"/></div>
</td>
<td>
<div class="droppable" id="boite1">Ecureuil</div>
</td>
</tr>
<tr>
<td>
<div class="draggable" id="image2"><img src="pictures/OieE.jpg" width="100"/></div>
</td>
<td>
<div class="droppable" id="boite2">Castor</div>
</td>
</tr>
<tr>
<td>
<div class="draggable" id="image3"><img src="pictures/OieF.jpg" width="100"/></div>
</td>
<td>
<div class="droppable" id="boite3">Oie</div>
</td>
</tr>
</table>
</body>

mitchellsimoens
1 Dec 2011, 11:24 AM
Weird as I have done multiple droppable before but I can't get this to work either.

delacha
2 Dec 2011, 2:38 AM
It seems that this is essentially the management of the property "revert" that is involved.
I do not understand why it is well managed for the last DIV and not the previous ones.
Is there a global property which allows only the last move?