Drag & drop avec des listes imbriquées

**tigunn** · 16/11/2012, 12h11

Bonjour a tou(te)s!

Cela fait longtemps que je ne suis venu dans cette section; et aujourd'hui je fais mon comeback (qui a dit sauve qui peut ?) avec un problème intéressant.
Voilà je dois mettre en place un système de drag and drop sur des listes imbriquées.
Voici un exemple (tiré du site Chez Syl):

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<title>Le drag and drop avec HTML5 et jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// ajoute la propriété pour le drop et le transfert de données
$.event.props.push('dataTransfer');
 
$(document).ready(function() {
    var i, $this, $log = $('#log');
 
 
    $('#liste li.liste').on({
        // on commence le drag
        dragstart: function(e) {
            $this = $(this);
            i = $(this).index();
            $(this).css('opacity', '0.5');
 
            // on garde le texte en mémoire
            //e.dataTransfer.setData('text/html', $(this).text());
            e.dataTransfer.setData('text/html', $(this).html());
        },
        // on passe sur un élément draggable
        dragenter: function(e) {
            // on augmente la taille pour montrer le draggable
            $(this).animate({
                width: '90px'
            }, 'fast');
 
            e.preventDefault();
        },
        // on quitte un élément draggable
        dragleave: function() {
            // on remet la taille par défaut
            $(this).animate({
                width: '75px'
            }, 'fast');
        },
        // déclenché tant qu on a pas lâché l élément
        dragover: function(e) {
            e.preventDefault();
        },
        // on lâche l élément
        drop: function(e) {
            // si l élément sur lequel on drop n'est pas l'élément de départ
            if (i !== $(this).index()) {
                // on récupère le texte initial
                var data = e.dataTransfer.getData('text/html');
 
                // on log
                $log.html(data + ' > ' + $(this).text()).fadeIn('slow').delay(1000).fadeOut();
 
                // on met le nouveau texte à la place de l ancien et inversement
                /*$this.text($(this).text());
                $(this).text(data);*/
 
                $this.html($(this).html());
                $(this).html(data);
            }
 
            // on remet la taille par défaut
            $(this).animate({
                width: '75px'
            }, 'fast');
        },
        // le drop est terminé, fin du drag
        dragend: function() {
            $(this).css('opacity', '1');
        },
        // au clic sur un élément
        click: function() {
            alert($(this).text());
        }
    });
 
 
 
    $('#liste_D_1 li.D_1').on({
        // on commence le drag
        dragstart: function(e) {
            $this = $(this);
            i = $(this).index();
            $(this).css('opacity', '0.5');
 
            // on garde le texte en mémoire
            //e.dataTransfer.setData('text/html', $(this).text());
            e.dataTransfer.setData('text/html', $(this).html());
        },
        // on passe sur un élément draggable
        dragenter: function(e) {
            // on augmente la taille pour montrer le draggable
            $(this).animate({
                width: '90px'
            }, 'fast');
 
            e.preventDefault();
        },
        // on quitte un élément draggable
        dragleave: function() {
            // on remet la taille par défaut
            $(this).animate({
                width: '75px'
            }, 'fast');
        },
        // déclenché tant qu on a pas lâché l élément
        dragover: function(e) {
            e.preventDefault();
        },
        // on lâche l élément
        drop: function(e) {
            // si l élément sur lequel on drop n'est pas l'élément de départ
            if (i !== $(this).index()) {
                // on récupère le texte initial
                var data = e.dataTransfer.getData('text/html');
 
                // on log
                $log.html(data + ' > ' + $(this).text()).fadeIn('slow').delay(1000).fadeOut();
 
                // on met le nouveau texte à la place de l ancien et inversement
                /*$this.text($(this).text());
                $(this).text(data);*/
 
                $this.html($(this).html());
                $(this).html(data);
            }
 
            // on remet la taille par défaut
            $(this).animate({
                width: '75px'
            }, 'fast');
        },
        // le drop est terminé, fin du drag
        dragend: function() {
            $(this).css('opacity', '1');
        },
        // au clic sur un élément
        click: function() {
            alert($(this).text());
        }
    });
 
});
</script>
</head>
<body>
	<h2>Le drag and drop avec HTML5 et jQuery</h2>
 
	<ul id="liste">
 
	  <li class="liste" draggable="true">A</li>
	  <li class="liste" draggable="true">B</li>
	  <li class="liste" draggable="true">C</li>
	  <li draggable="true">D
	  	<ul id="liste_D_1">
	  		<li class="D_1" draggable="true">E</li>
	  		<li class="D_1" draggable="true">F</li>
	  		<li class="D_1" draggable="true">G</li>
	  	</ul>
	  </li>
	</ul>
 
	<div id="log"></div>
 
</body>
</html>

Avec la css fournie sur le site et la bibliothèque jQuery-1.7.1.min.js.
Enfin, tel quel je peux drag-droper mes éléments A, B, C d'une part; et E, F, G de l'autre mais je n'arrive pas à déplacer mon D.
Auriez-vous des suggestions? Merci

**NoSmoking** · 17/11/2012, 08h39

Bonjour,
on trouve dans ton code

Code javascript :

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

1
2
3
4
    $('#liste li.liste').on({
        // on commence le drag
        dragstart: function(e) {
// la suite...

mais tu n'appliques pas la class à l'LI que tu souhaites "dragger", donc

Code html :

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

1
2
3
4
5
6
7
	  <li class="liste" draggable="true">D
	  	<ul id="liste_D_1">
	  		<li class="D_1" draggable="true">E</li>
	  		<li class="D_1" draggable="true">F</li>
	  		<li class="D_1" draggable="true">G</li>
	  	</ul>
	  </li>

**tigunn** · 17/11/2012, 14h24

Envoyé par NoSmoking

tu n'appliques pas la class à l'LI que tu souhaites "dragger"

Oui, le but était de permettre par cet exemple des drag and drop sur des listes imbriquées. Or si je fais ce que tu signales, et que je souhaite mettre en place, cela ne fonctionne plus. Donc le problème demeure.

Il faudrait pouvoir déplacer l'élément D, et ses sous élements, dans la liste (à la manière d'un tri, cf sortable), et, les élements E, F et G doivent pouvoir être déplacé dans D, ou vers un autre élement (comme A, B ou C).

**NoSmoking** · 17/11/2012, 18h52

J'ai l'impression que dans ta méthode drop il va te falloir tenir compte des éléments ayant des fils.

**danielhagnoul** · 18/11/2012, 01h24

Bonsoir

Voici un exemple, il suffit de copier-coller le code pour tester :

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; /*border:0.1rem dotted grey;*/ }
			.table1, .table2 { border-collapse:separate; border-spacing:0.6rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { height:45rem; }
			.table1 article { width:25rem; vertical-align:top; }
 
			/*.table1 .ligne article:nth-of-type(1) { width:125rem; }*/
 
			.table2 .ligne { height:20rem; }
			.table2 article { width:80rem; }
 
			/* TEST */
			#liste, #liste2 { margin: 24px; }
 
			#liste li, #liste2 li {
			    margin:4px;
			    width:75px;
			    border: 1px solid #000;
			    border-radius:2px;
			    cursor: move;
			    text-align:center;
			    padding:2px;
			    box-shadow: 1px 1px 12px #555;
			    background-color:white;
			    list-style-type:none;
			}
 
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Drag and drop HTML5</h2>
		<section class="conteneur">
			<section class="table1">
				<section class="ligne">
					<article>
 
						<ul id="liste">
						  <li>A1</li>
						  <li>B1</li>
						  <li>C1</li>
						  <li>D1</li>
						</ul>
 
						<ul id="liste2">
							<li>A2</li>
							<li>B2</li>
							<li>C2</li>
							<li>
								D2
								<ul>
									<li>E2</li>
									<li>F2</li>
									<li>G2</li>
								</ul>
							</li>
						</ul>
 
					</article>
					<article>
 
						<div>
							<p>Attention, il s'agit de "drag" et "drop" en HTML5 et pas en jQuery UI.</p>
							<p>On peut modifier l'ordre des éléments "li" de deux listes, mais on ne peut pas 
								placer un élément d'une liste dans une autre.</p>
							<p>Si l'on souhaite que cela soit possible, il suffit de modifier l'événement 
								"dragover" en retournant toujours "false".</p>
						</div>
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-11-18T01:03:16.747+01:00" pubdate>2012-11-18T01:03:16.747+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
 
				 var draggedElement = null;
 
				 // drag				 
				 $( "#liste li, #liste2 li" )
				 	.prop( "draggable", true )
				 	.on( "dragstart", function( e ){
				 		e.originalEvent.dataTransfer.setData( "text/plain", ""); // pour Firefox !
				 		draggedElement = e.target;
				 	});
 
				  // dropp
				 $( "#liste, #liste2" ).on({
				 	"dragover" : function( e ){
				 		if ( $( "li", this ).index( draggedElement ) != -1 ){
				 			return false; // Annule l'interdiction de "drop"
				 		}
 
				 		return true;
				 	},
				 	"drop" : function( e ){
				 		e.preventDefault();
 
				        if ( e.target == this ){
				        	$( this ).prepend( draggedElement );
				        } else {
				        	$( e.target ).after( draggedElement );
				        }
				 	}
				 });
 
			});
 
			$( window ).load( function(){
 
			});
		</script>
	</body>
</html>

**tigunn** · 19/11/2012, 09h43

Je vous remercie de vos réponses; a première vue cela pourrait bien convenir.
Je testerais cela dès que possible et je vous tiendrais au courant.
Merci.

**tigunn** · 26/11/2012, 11h42

Bonjour,
Merci de votre aide, cette solution fonctionne bien. J'ai fait quelques modifs pour l'adapter à mes besoins et il me reste à définir les actions ajax mais cela semble en bonne voie.

Merci.

Drag & drop avec des listes imbriquées

jQuery

Discussions similaires

Partager

Partager