[Yahoo UI] Modification Drag'n Drop

[Pierot86]

Bonjour à tous,

J'ai implémenté les fonctions Drag'n Drop que Yahoo fournit et ça fonctionne très bien mais j'aimerais maintenant utiliser la fonctionnalité "Custom Click Validator" exemple sur un tableau d'objet.

j'utilise donc le code html suivant pour l'appel:

Code :

1
2
3
 
echo '<div id="athlete['.$id.']" class="dd-demo-1">'.$image.'</div>'; ...
echo '<div id="embarcation['.$cmp1.']['.$cmpt2.']" class="dd-demo-2"></div>';

et le code javascript suivant :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<script type="text/javascript">
(
function()
{
    var el = new Array(),
        dd = new Array(), 
        dd2 = new Array(),
        clickRadius = 46,
        startPos = new Array(),
        Event = YAHOO.util.Event,
        Dom = YAHOO.util.Dom;
 
    YAHOO.util.Event.onDOMReady
    (
        function() 
        {
            for (i in tabathletes)
            {
                el[tabathletes[i]] = Dom.get("athlete[" + tabathletes[i] + "]");
                startPos[tabathletes[i]] = Dom.getXY(el[tabathletes[i]]);
                dd[tabathletes[i]] = new YAHOO.util.DD(el[tabathletes[i]]);
            }
 
            dd.onDragDrop = function(e, id)
            {
                // center it in the square
                Dom.setXY(this.getEl(), Dom.getXY(id));
            }
 
            dd.onInvalidDrop = function(e)
            {
                // return to the start position
                //Dom.setXY(this.getEl(), startPos[i]);
 
                // Animating the move is more intesting
                new YAHOO.util.Motion(
                    this.id, {
                        points: {
                            to: startPos[1]
                        }
                    }, 
                    0.3, 
                    YAHOO.util.Easing.easeOut 
                ).animate();
 
            }
 
            for(i=1;i<=1;i++)
            {
                for(j=1;j<=4;j++)
                {
                    dd2[i] = new YAHOO.util.DDTarget("embarcation[" + i + "][" + j +"]");
                }
            }
 
        }
      );
 
}
)();
</script>

J'ai déjà pu remarquer que si à la place de dd.onDragDrop = function(), je mettais dd[1].onDragDrop = function(), ça fonctionne bien mais seulement pour la première image ... (normal) donc j'aurais voulu savoir comment faire pour bien discerner l'objet concerné par l'appel de la fonction.

Merci d'avance pour votre aide, je galère