Bonjour à tous,

Voilà j'essaye de faire fonctionner le drag'n'drop de mootools sur une simple page web afin de l'étudier et l'intégrer à un projet.
La mise en place du drag'n'drop n'est pas très compliqué, je me suis basé sur les démos de mootools disponible mais j'ai un soucis mes éléments draggable, ils perdent leur style.

Alors pour illustrer tout ça voici ce que je voudrai obtenir:
- Les lettres sont les éléments draggable.
- La boîte grise la zone de drop.


Mais voici ce que j'obtiens :


Comme vous pouvez le voir la liste est écrasée, pour réaliser le premier screenshot j'ai simplement désactivé le javascript dans mon code, donc je peux en conclure que ça viens de mootools

Si une âme charitable pouvez m'expliquer pourquoi la liste se retrouve écrasé et comment faire pour qu'elle soit affiché normalement tout en restant draggable. D'avance merci.

Max.

Voici le code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
63
64
65
66
67
68
69
70
71
72
73
74
 
<html>
    <head>
        <title>Test drag</title>
        <script type="text/javascript" src="moo.js"></script>
        <script type="text/javascript">
            window.addEvent('domready',function(){
                var fx = [];
 
                $$('#draggables div').each(function(drag){
                    new Drag.Move(drag, {
                    droppables: $$('#droppables div')
                });
 
                drag.addEvent('emptydrop', function(){
                    this.setStyle('background-color', '#faec8f');
                });
});
 
            $$('#droppables div').each(function(drop, index){
                fx[index] = drop.effects({transition:Fx.Transitions.Back.easeOut});
                drop.addEvents({
                    'over': function(el, obj){
                        this.setStyle('background-color', '#78ba91');
                    },
                    'leave': function(el, obj){
                        this.setStyle('background-color', '#1d1d20');
                    },
                    'drop': function(el, obj){
                        el.remove();
                        fx[index].start({
                        'height': this.getStyle('height').toInt() + 30,
                        'background-color' : ['#78ba91', '#ccc']
                    });
                }
        });
    });
});
        </script>
        <style type="text/css">
            #droppables div
            {
                float: left;
                margin: 10px;
                width: 100px;
                height: 100px;
                background: #ccc;
            }
        </style>
    </head>
    <body>
 
    <div id="draggables">
        <ul>
        <li><div class="drag">A</div></li>
        <li><div class="drag">b</div></li>
        <li><div class="drag">c</div></li>
        <li><div class="drag">d</div></li>
        <li><div class="drag">e</div></li>
        <li><div class="drag">f</div></li>
        <li><div class="drag">g</div></li>
        <li><div class="drag">h</div></li>
        <li><div class="drag">i</div></li>
        <li><div class="drag">j</div></li>
        </ul>
    </div>
 
    <div id="droppables">
        <div class="drop"></div>
 
    </div>
 
    </body>
</html>