Discussion :

[macro974]

Bonjour,

Depuis peu j'ai un petit souci, je voudrais récupérer l'id de l'élément qui a la propriété draggable et l'id de l'élément droppable et les afficher dans la console. Pour l'élément que j'ai déplacé il affiche le bon id, mais pour l'id de la div où il a été déposé, je reçois toujours la même valeur c'est à dire 1 et je ne comprends pas pourquoi ?

Voila mon 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
 
<div id="zone">
            <div id="case1x1" class="image" </div>
            <div id="case1x2" class="image" </div>
            <div id="case1x3" class="image" </div>
            <div id="case2x1" class="image" </div>
            <div id="case2x2" class="image" </div>
            <div id="case2x3" class="image" </div>
            <div id="case3x1" class="image" </div>
            <div id="case3x2" class="image" </div>
            <div id="case3x3" class="image" </div>
        </div>
 
 <div id="game">
            <div class="jeu" id="1"></div>
            <div class="jeu" id ="2"></div>
            <div class="jeu" id="3"></div>
            <div class="jeu"id="4"></div>
            <div class="jeu" id="5"></div>
            <div class="jeu" id="6"></div>
            <div class="jeu" id="7"></div>
            <div class="jeu" id="8"></div>
            <div class="jeu" id="9"></div>

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
 
$('.image').draggable({
    containment :'miniprojet',
    snap:".jeu",
    snapMode:"inner",
    revert: 'invalid',
 
 
 
 
});
$('#game').droppable({
 
    tolerance:"pointer",   
     drop: function(ev, ui) {
           var objet_drop = $(ui.draggable); // L'élément drop
            var id_objet = objet_drop.attr('name'); // ID de l'élément drop
            var drop = $(this).children('div').attr('id');
 
            console.log(id_objet);
            console.log(drop);
 
       }

[Meloooo]

Salut,
Essayes ca pour draggable :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(function(){
	$('.image').draggable({
		containment :'miniprojet',
		snap:".jeu",
		snapMode:"inner",
		revert: 'invalid',
		start: function() {
			console.log($(this).attr('id')); // affiche l'ID dans ta console firebug, tu peux également faire un alert
		}
	});
});

[macro974]

la il me donne l'id de l'élément droppé , mais l'id de la case du tableau qui reçoit
l'élément droppé reste toujours à 1

[Meloooo]

Comme ca, ca à l'air de fonctionner :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	$('.jeu').droppable({
		tolerance:"pointer",   
		 drop: function(ev, ui) {
			   var objet_drop = $(ui.draggable); // L'élément drop
				var id_objet = objet_drop.attr('name'); // ID de l'élément drop
				console.log($(this).attr('id'));
 
		   }
	});

[Golgotha]

Met le drop sur les éléments ".jeu"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.jeu').droppable({
 
    tolerance:"pointer",   
     drop: function(ev, ui) {
           var objet_drop = $(ui.draggable); // L'élément drop
            var id_objet = objet_drop.attr('id'); // ID de l'élément drop
            var drop = $(ev.target).attr("id");
 
            console.log(id_objet);
            console.log(drop);
 
       }
    });

[macro974]

merci beaucoup cela fonctionne . j'avoue je me sens un peu *** sur les bords la .
Dernier problèmes quand je génère du code html via javascript et que je fais un drag and drop avec jquery ui cela ne semble pas fonctionner

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
87
88
89
90
91
92
93
94
95
96
 
<script>
$('.zimages').draggable({
        containment :'miniprojet',
        snap:".jeu",
        snapMode:"inner",
        revert: 'invalid',
    start: function() {
            console.log($(this).attr('id'));
            console.log($('td').attr('name'))
        }
});
        
$('.jeu').droppable({
 
    tolerance:"pointer",   
     drop: function(ev, ui) {
           var objet_drop = $(ui.draggable); // L'élément drop
            var id_objet = objet_drop.attr('id'); // ID de l'élément drop
            var drop = $(ev.target).attr("id");
 
            console.log(id_objet);
            console.log(drop);
 
       }
    });
 
 
window.onload = function ( ) {
    
    var aleatoire = Math.floor(Math.random() *)+1;
    var img_path = 'img/wal_'+aleatoire+'.jpg'; //'
    var img = new Image();
     
  
    img.onload = function ( )
    {
        
        var min  = Math.min( img.width, img.height );
         
        
        var size = Math.floor( min / 3);
         
        var i;
        var div;
        var row;
        var col;
        
     
        var container = document.createElement('div');
         
        
        for ( i = 0; i < 9; i += 1 )
        {
            
            
            div=document.createElement('div');
            div.setAttribute("id",i);
            div.setAttribute('class',"zimages")
            div.style.width  = size + 'px';
            div.style.height = size + 'px';
           
             
            div.style.backgroundImage = 'url(' + img_path + ')';
             
           
            row = ( i % 3 );
            col = Math.floor( i / 3 );
             
            
            div.style.backgroundPosition =   - row * size + 'px ' + - col * size + 'px';
             
            
            div.style.float = 'left';
             
            
            if ( !row )
            {
                div.style.clear = 'left';
            }
             
            
            container.appendChild( div );
        }
         
    
        document.body.appendChild( container );
    };
     
    
    img.src = img_path;
    
 
};
 
</script>