Sortable sur div imbriqués colonnes et lignes
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:
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.
