Sortable sur div imbriqués colonnes et lignes

**kabkab** · 22/12/2009, 13h42

Bonjour,
Je viens de me lancer sur scriptaculous et pour les besoins d'administration je dois pouvoir trier mes articles avant de les publier.
Mes articles peuvent apparaître chacun sur une ligne ou par deux voire même par trois.
J'ai fouillé un peu mais néophyte dans le domaine j'ai réussi à jouer sur l'ordre des articles qui se présentent un par ligne (je n'ai aucun mérite, c'est dans les exemples). Je cale sur les lignes qui contiennent 2 ou 3 articles par lignes.
Je voudrais en premier lieu pouvoir changer l'ordre gauche, centre ou droite des articles sur la même ligne. Plus tard, je me lancerais sur la possibilité d'interchanger un article qui est sur une ligne qui en contient plusieurs avec un article sur une seule ligne.
Je mets mon exemple, je crois que c'est mieux pour la compréhension.

Code html :

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
75
76
77
78
79
80
81
82
83
84
85
86
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="src/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
<style type="text/css">
<!--
.bouge {
        background-color: #FFFFFF;
        border: 1px dotted #00FF99;
        margin: 2px;
}
#all {
        background-color: #FFFFFF;
        width: 400px;
        overflow: hidden;
}
.gauche {
        float: left;
        background-color: #FFFFFF;
        border: 1px dotted #0099FF;
        width: 49%;
}
.droite {
        float: right;
        background-color: #FFFFFF;
        border: 1px dotted #0099FF;
        width: 49%;
}
body {
        background-color: #CCCCCC;
}
-->
</style>
</head>
 
<body>
<div id="all">
<div id="liste_1" class="section">
	<div class="bouge">
	Un
	</div>
	<div class="bouge">
	Deux
	</div>
	<div class="bouge">
	<div class="gauche">
	Trois 1
	</div>
	<div class="droite">
	Trois 2
	</div>
	<div style="clear:both;"></div>
	</div>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
 
  // Création de la première boîte triable
  Sortable.create(
    // nom du id de la liste 1
    "liste_1",
    {
      // type de balise affecté - pourrait être aussi par ex. "ul"
      tag:"div",
 
      // permet de glisser un item d'une boîte à l'autre
      dropOnEmpty: true,
 
      // boîtes dans lesquelles les items peuvent être glissés
      containment: ["liste_1"],
 
      // Les items transférables ont comme nom de classe "lineitem"
      only:"bouge"
    }
  );
 
 
// ]]>
</script>
</body>
</html>

Ainsi, dans cet exemple, je peux trier ligne par ligne mais je voudrais pour interchanger Trois 1 et Trois 2 et pourquoi pas Trois 2 avec Un ou Deux.
J'ai vu un exemple avec tree mais je ne sais pas si c'est ce qu'il me faut.

**gwyohm** · 22/12/2009, 14h57

Envoyé par kabkab

... mais je voudrais pour interchanger Trois 1 et Trois 2 et pourquoi pas Trois 2 avec Un ou Deux.
J'ai vu un exemple avec tree mais je ne sais pas si c'est ce qu'il me faut.

Salut,

Je pense qu'il vaut mieux effectivement t'inspirer de l'exemple avec un tree : il y a réellement une notion d'arborescence (même si elle est limitée en profondeur).
L'utilisation tel que des sortables est assez contraignante (je trouve)
Peux tu donner l'URL de cet exemple ?

**kabkab** · 22/12/2009, 15h05

Bonjour,
Merci pour la rapidité de ta réponse.
Je n'ai pas encore "hébergé" mon test. Tout de même, j'ai un semblant de "réussite" avec ces modifs sur le script d'appel.

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
<script type="text/javascript">
// <![CDATA[
 
  // Création de la première boîte triable
  Sortable.create(
    // nom du id de la liste 1
    "liste_1",
    {
      // type de balise affecté - pourrait être aussi par ex. "ul"
      tag:"div",
 
      // permet de glisser un item d'une boîte à l'autre
      dropOnEmpty: true,
 
      // boîtes dans lesquelles les items peuvent être glissés
      containment: ["liste_1"],
		tree: true,
      // Les items transférables ont comme nom de classe "lineitem"
      only:["agauche","ag-gauche","ag-droite"]
    }
  );
 
 
// ]]>
</script>

J'ai ajouté tree: true et modifié la variable only pour qu'elle ne prenne que les classes qui m'intéressent.
Il me reste maintenant à jouer sur onChange pour vérifier quand je modifie l'ordre d'un article qui est sur une ligne à plusieurs articles.

Sortable sur div imbriqués colonnes et lignes

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager