Récupérer l'id de l'élément (Drag) et l'id de l'élément (Drop)

**elkhazak** · 31/10/2018, 12h15

Bonjour à tous,

SVP Comment puis-je récupérer l'id de l'élément Drag (Ex : id="opp_1" ) et l'élement Drop ( Ex : id="phase_2" ) ?

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
<section id="connected">
		<h2>Connected Sortable Lists</h2>
		<ul id="phase_1" class="connected list">
			<li id="opp_1">Item 1</li>
			<li id="opp_2">Item 2</li>
		</ul>
		<ul id="phase_2" class="connected list no2">
			<li id="opp_4" class="highlight">Item 4</li>
			<li id="opp_3" class="highlight">Item 3</li>
		</ul>
	</section>
 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="jquery.sortable.js"></script>
	<script>
                $(function() {
                        $('.sortable').sortable();
                        $('.handles').sortable({
                                handle: 'span'
                        });
                        $('.connected').sortable({
                                connectWith: '.connected'
                        });
                        $('.exclude').sortable({
                                items: ':not(.disabled)'
                        });
                });
        </script>

Merci d'avance.

**Toufik83** · 31/10/2018, 15h30

bonjour,
tout d'abord tu dois savoir que sortable droppable et draggable nécessitent jquery-ui.js.
donc il faut d'abord charger le fichier ui.js :

Code :

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

1
2
3
4
5
 
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
  crossorigin="anonymous"></script>

puis le code devient :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 $(function() {
 
   $('.connected').sortable({
	connectWith: '.connected'
   })
   .droppable({
	drop: function(event,ui) {//quand on "drop" l’élément.
		console.log('id element droppé :'+$(ui.draggable).attr('id')+', sur id du parent :'+$(event.target).attr('id'));
	}
   });
});

**elkhazak** · 31/10/2018, 15h49

Bonjour @Toufik83

j'ai rajouté la biblio comme tu m'a expliqué et voici ce que j'ai comme résultat :

Nom : 11.PNG
Affichages : 974
Taille : 35,3 Ko

Code :

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
<section id="connected">
		<h2>Connected Sortable Lists</h2>
		<ul id="phase_1" class="connected list">
			<li id="opp_1">Item 1</li>
			<li id="opp_2">Item 2</li>
		</ul>
		<ul id="phase_2" class="connected list no2">
			<li id="opp_4" class="highlight">Item 4</li>
			<li id="opp_3" class="highlight">Item 3</li>
		</ul>
	</section>
	<script
			  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
			  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
			  crossorigin="anonymous">
	</script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="jquery.sortable.js"></script>
	<script>
 
                $(function() {
 
   $('.connected').sortable({
        connectWith: '.connected'
   })
   .droppable({
        drop: function(event,ui) {//quand on "drop" l’élément.
                console.log('id element droppé :'+$(ui.draggable).attr('id')+', sur id du parent :'+$(event.target).attr('id'));
        }
   });
});
        </script>

Aprés j'ai rajouté un " ; " à la fin de :

Code :

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

1
2
3
4
5
$(function() {
 
   $('.connected').sortable({
	connectWith: '.connected'
   });

et cela me donne :

Nom : 22.PNG
Affichages : 946
Taille : 14,7 Ko

**Toufik83** · 31/10/2018, 15h59

l'erreur signifie que tu n'as pas charger la bibliothèque jQuery, ou tu l'a mal placé.(normalement les scripts doivent être dans la balise <head>, tout en haut de la page mais bon...)
jQuery doit être charger en premier et puis les autres scripts....

mais pourquoi tu as ajouté ";" a la fin ?

ta page doit être comme ça :

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
 
<section id="connected">
		<h2>Connected Sortable Lists</h2>
		<ul id="phase_1" class="connected list">
			<li id="opp_1">Item 1</li>
			<li id="opp_2">Item 2</li>
		</ul>
		<ul id="phase_2" class="connected list no2">
			<li id="opp_4" class="highlight">Item 4</li>
			<li id="opp_3" class="highlight">Item 3</li>
		</ul>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- chargement de jQuery EN PREMIER!-->
<!-- chargement de ui.js!-->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" 
			  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
			  crossorigin="anonymous">
</script>
<script src="jquery.sortable.js"></script>
<script>
 $(function() {
 
   $('.connected').sortable({
	connectWith: '.connected'
   })//n'ajoute surtout pas un point virgule ici
   .droppable({
	drop: function(event,ui) {//quand on "drop" l’élément.
		console.log('id element droppé :'+$(ui.draggable).attr('id')+', sur id du parent :'+$(event.target).attr('id'));
	}
   });
});
</script>

**elkhazak** · 31/10/2018, 16h05

Envoyé par Toufik83

l'erreur signifie que tu n'as pas charger la bibliothèque jQuery.

j'ai googlé le pb et j'ai trouvé qu'il me faut charger Jquery avant et mon script après :

Code :

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

1
2
3
4
5
6
7
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="jquery.sortable.js"></script>
	<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
  integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
  crossorigin="anonymous"></script>
	<script>

Pour le " ; " je l'ai retiré et ça marche maintenant.

Merci beaucoup khouya Toufik

**Toufik83** · 31/10/2018, 16h13

de rien khoya, je te conseil juste de ne pas essayer de faire des codes compliqués tant que tu n'a pas encore maîtriser la syntaxe jQuery.
bon courage.

**elkhazak** · 31/10/2018, 16h18

le pb c'est que j'arrive pas à distinguer entre un code simple t compliqué parce qu'il m’apparaît simple

Je dois me documenter car je cherche les codes et puis je les modifie selon le besoin

Merci pour le temps et l'effort et le conseil que tu viens de me donner.

Récupérer l'id de l'élément (Drag) et l'id de l'élément (Drop)

jQuery

Discussions similaires

Partager

Partager