Discussion :

[mOscar007]

Bonjour à tous,

J'aimerais faire la même chose que ce qu'il y a sur ce lien : http://www.sebastienangot.fr/blog/developpement/tutoriel-drag-and-drop-jquery-ajax-sauvegarde-en-base-de-donnees/

Mais seulement dans mon cas ça ne marche pas puisque je ne récupère pas mes blocs dans une boucle. Mes blocs n'ont pas la même structure html donc je suis obligé de récupérer dynamiquement chaque bloc avec sa propre requête. Ce qui cause à mon avis le problème de positionnement. Existe-il un moyen de le faire sans passer par la boucle ? Merci

Cdlt,

[Showie]

Bonjour,

Aurais tu moyen de nous montrer la structure de tes éléments ça nous aiderais à analyser ton soucis ?

[mOscar007]

Re @Showie,

Merci d'avoir pris le temps de me répondre.
Mes éléments (divs) ci-dessous ont des structures différentes dans une template (page). Je souhaiterais gérer leur ordre c-à-d les déplacer (ré-organiser) par glisser-déposer et ensuite sauvegarder en live en base de données comme dans ce tutoriel : http://www.sebastienangot.fr/blog/developpement/tutoriel-drag-and-drop-jquery-ajax-sauvegarde-en-base-de-donnees/

Les différences avec l'exemple du tutoriel dans le lien ci-dessus sont : moi j'ai des blocs (div) au lieu des listes (li) et dans le tutoriel c'est une boucle pour afficher les puces comme il s'agit des mêmes éléments. Dans mon cas les divs n'ont pas les mêmes éléments donc je ne peux pas faire de boucle, d'ou la récupération individuel des divs. Hors pour avoir de l'ordre il faut qu'il y ait une boucle. Existe-il de solutions sans boucle ? Merci

Voici la structure de mes éléments :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
// Structure de la table `order`
CREATE TABLE IF NOT EXISTS `order` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `titre` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `image` varchar(255) NOT NULL,
  `lien` varchar(255) NOT NULL,
  `position` int(11) NOT NULL,
  PRIMARY KEY (`newsletter_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

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
 
<div id="<?=$row['id'];?>">
  <h4><?=$row['titre'];?></h4>
  <p><img src="<?=$row['image'];?>"></p>
  <p><?=$row['description'];?></p>
  <p><a href="#"><?= $row['lien']; ?></a></p>
</div>
<div id="<?=$row['id'];?>">
  <h4><?=$row['titre'];?></h4>
  <p><?=$row['description'];?></p>
  <p><a href="#"><?= $row['lien']; ?></a></p>
</div>
<div id="<?=$row['id'];?>">
  <h4><?=$row['titre'];?></h4>
  <p><?=$row['description'];?></p>
</div>
<div id="<?=$row['id'];?>">
  <p><img src="<?=$row['image'];?>"></p>
  <p><a href="#"><?= $row['lien']; ?></a></p>
</div>

[Showie]

Ta liste d'élément devrait-être enrichie de class sur les div et d'une div englobant afin de faciliter la sélection des éléments.

voila un rapide exemple avec ta structure de code :http://jsfiddle.net/joxbxzz1/

est ce que c'est bon pour toi?

[mOscar007]

Re @Showie,

Merci encore pour ta réponse mais ce n'est pas la réorganisation le problème mais plutôt la sauvegarde.
Je veux afficher mes DIV dans l'ordre, ce qui sous-entend :
J'affiche le premier;
Puis le deuxième;
et ainsi de suite...;

Hors sans boucle, mon programme ne peut pas afficher les éléments du 1er au dernier. Je précise bien que mes DIV n'ont pas la même constitution des éléments (c-à-d structure différente). Est-ce que le fait de ne pas passer par une boucle pose problème ?

Faut-il (en base de données) que je précise pour chaque DIV à afficher, celle que je veux et créer des fonctions pour chacune des DIV ?

Par exemple :

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
 
// connexion BD
require_once('db.php');
 
$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute() or die(print_r($req->errorInfo()));
$row = $req->fetchAll();
 
switch ($row['id']) {
    case 1:
        function div1(){
            echo "<div class='toto'>$row['contenu_div1']</div>";
        }
        break;
    case 2:
        function div2(){
            echo "<div class='tutu'>$row['contenu_div2']</div>";
        }
        break;
    case 3:
        function div3(){
            echo "<div class='tata'>$row['contenu_div3']</div>";
        }
        break;
    ...
    default:
        code to be executed 
} 
 
//------------------------------------
//recup des div à afficher en bdd par exemple stockées dans un array
$a_afficher = array();
$a_afficher[] = array('quellediv'=>'div1');
$a_afficher[] = array('quellediv'=>'div2');
$a_afficher[] = array('quellediv'=>'div3');
 
//------------------------------------
// je génère l'affichage
//... via une BOUCLE !!!!
for ($i=0;$i<3;$i++){
  $a_afficher[$i]();
}

Merci

[Showie]

ok,

Juste pour info, j'ai fait une petite erreur dans le code précédent aussi j'ai corrigé le fiddle

Le fait de ne pas passer par une boucle ne pose pas de soucis il faut juste trouvé un point commun à tout tes blocs regarde l exemple du fiddle que j'ai modifié :http://jsfiddle.net/joxbxzz1/8/ le point commun c'est la class enfant et le fait d'appartenir à la DIV.bougeable.

Quand à l'enregistrement tu reçois les id dans l'ordre des positions :

Donc dans ton script /updateListe.php tu fait une boucle genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$parametres = array('div_1','div_3','div_2');
 
for($i=1;$i<count($parametres);$i++){
  UPDATE maTable  SET position = $i WHERE id = $parametres[$i];
}