Gestion du drop et des données en résultant

Bonjour,

Tout d'abord voici le code:

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() {
 
                //Zone drag
		//$(".nomForm").draggable({
                $("#toolbox li").draggable({
                        appendTo: "body",
			connectToSortable: '#buildForm',
			helper: 'clone',
			revert: 'invalid'
		});
 
                //Zone drop
                $("#buildForm").droppable({
                        drop: function(event, ui) {
				$(this).find(".placeholder").remove();
                                alert('ok');
			}
                }).sortable({
			revert: false
		});
 
                //Evite la selection lors du drag
                $("ul, li").disableSelection();
        });
</script>
<div id="editor">
    <h2>Création de votre formulaire</h2>
    <?php
    echo $form->create(null, array('url' => array('controller' => 'formulaires', 'action' => 'nouveau')));
    echo $this->Form->input('formulairename', array('label' => 'Nom du formulaire'));
    echo $this->Form->input('adressemail', array('label' => 'Adresse mail du contact'));
    ?>
 
    <?php
    echo $form->end('Sauvegarder');
    ?>
 
    <ul id="buildForm">
        <li class="placeholder">Faite glisser vos éléments ici.</li>
    </ul>
</div>
<div id="toolbox">
    <h4>Eléments de saisie</h4>
 
        <?php
        foreach($listeInput as $key => $element) {
            ?>
 
        <ul>
 
            <li class="nomForm" id="nomForm">
                    <img src="/img/<?php echo $element['Input']['img']; ?>" alt="element" />
                    <?php echo utf8_encode($element['Input']['nom']); ?>
                </li>
 
        </ul>
            <?php
        }
        ?>
 
</div>

Donc en gros j'ai un div à gauche et un div à droite.

Le div de droite contient une liste d'éléments. Je peux dropper chaque élément dans le div de gauche.
Quand je drop, un nouveau <li> est crée dans le div de gauche. Ces <li> sont ré-ordonnables.

Les problèmes:
- Pourquoi mon "alert('ok');" s'affiche 2 fois lors d'un drop (et pourtant le <li> est bien crée qu'une seule fois) ?
- Là il ne s'agit que de l'interface. Comment puis je ensuite envoyer les données qui ont été ajouté par les drop vers une page PHP en ajax ? J'avais pensé à manipuler un fichier XML ou du JSON à chaque fois qu'on ajoute un élément mais je ne sais pas du tout comment m'y prendre. Je sais que jquery permet de recevoir des réponses en XML ou JSON et de les parser mais je n'ai pas trouvé grand chose concernant la création (et la manipulation) de document XML ou JSON.

Merci de votre aide.