Discussion :

[morhead]

Bonjour,
J'ai créé un drag'n drop en jQueryUI, jusque la tout va bien.
En gros :

Code :

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

1
2
3
4
5
 
<div id="left"><div class="draggable"><div id="élément_12">Test</div></div>
<div id="right"><div class="droppable"><div id="boite_1"></div></div>
<div id="right"><div class="droppable"><div id="boite_2"></div></div>
<div id="right"><div class="droppable"><div id="boite_3"></div></div>

J'essaie de récupérer l'id de la div qui recoit l'élément draggé.
J'arrive à récupérer l'id mais juste de la première div "boite_1.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(".droppable").droppable({
hoverClass: "survole",
accept: ".draggable",
tolerance:"pointer",
drop: function(event, ui){
var boite=$('#right div').children('div').attr('id');
//On modifie la ligne dans la base de donnée
$.get("js/deleteNews.php",{boite: boite});		
}
});

Comment faire pour récupérer l'id de la div dans laquelle je drop ma div ?

[SpaceFrog]

sur le callback

Code :

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

$(this).parent()

?

[morhead]

Cela ne fonctionne pas. Ca me remonte "right".
Une autre idée ?


edit: pour info, je suis débutant en js.

[SpaceFrog]

sur le ondrop ???

on peut voir ton code ?

[morhead]

Code :

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

1
2
3
4
5
6
 
drop: function(event, ui){
var boite=$(this).parent().attr('id'));
//On modifie la ligne dans la base de donnée
$.get("js/deleteNews.php",{boite: boite});		
}

C'est bien dans mon callback que je suis la ?
*cerveau mode réveil on*

[SpaceFrog]

ha oui ...
un id DOIT être unique sur la page ...

[morhead]

Mes id sont uniques ... ah ! oui j'ai copié le code comme un .....

Ma div right c'est ca :

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
 
<div id="left">
      <div class="draggable">
           <div id="élément_12">Test</div>
      </div>
</div>
 
<div id="right">
      <div class="droppable">
           <div id="boite_1"></div>
      </div>
      <div class="droppable">
           <div id="boite_2"></div>
      </div>
      <div class="droppable">
           <div id="boite_3"></div>
      </div>
</div>

Désolé :/

[SpaceFrog]

jette un oeil sur ce post

http://stackoverflow.com/questions/4...was-it-dragged

[morhead]

Trouvé merci !!!! Bon en fait il a fallut que je revois mon code ^^

Pour rappel :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(".droppable").droppable({
hoverClass: "survole",
accept: ".draggable",
tolerance:"pointer",
drop: function(event, ui){
var boite=$('#right div').children('div').attr('id');
//On modifie la ligne dans la base de donnée
$.get("js/deleteNews.php",{boite: boite});		
}
});

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
 
<div id="left">
      <div class="draggable">
           <div id="élément_12">Test</div>
      </div>
</div>
 
<div id="right">
      <div class="droppable">
           <div id="boite_1"></div>
      </div>
      <div class="droppable">
           <div id="boite_2"></div>
      </div>
      <div class="droppable">
           <div id="boite_3"></div>
      </div>
</div>

Mon problème était en fait ma structure HTML, avec un append et quelques modifications j'ai solutionné le problème....

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$("#boite_1,#boite_2,#boite_3").append('<div class="droppable"></div>');
 
 
$("#boite_1,#boite_2,#boite_3").droppable({
     hoverClass: "joueur_survole",
     drop: function(event, ui){
	var boite= $(this).attr('id');
	//On modifie la ligne dans la base de donnée
	$.get("js/deleteNews.php",{boite: boite});		
	}
});

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="left">
      <div class="draggable">
           <div id="élément_12">Test</div>
      </div>
</div>
 
<div id="right">
           <div id="boite_1"></div>
           <div id="boite_2"></div>
           <div id="boite_3"></div>
</div>

Cela fonctionne à présent ^^

Par contre une dernière petite question, ma div draggable se drop dans ma div boite mais pas à la maniere d'un sortable, c'est à dire, au ondrop quelle prenne exactement la meme position que la div boite.

J'ai essayé pas mal de choses mais rien ne semble fonctionner.

[SpaceFrog]

tu peux leur mettre un data_pos au depart
et faire un tri sur ce data-pos à l'arrivée ?

[morhead]

en fait faire correspondre manuellement l'id de la div boite avec une pos ?
Et la div draggée ayant l'id de la boite prendra la pos inscrite en dur ?

[SpaceFrog]

ha ben non plus simple tri sur l'id ...

soit tu le code toi même,
en t'inspirant de ça :
http://javascript.developpez.com/faq...=Other#TrierLi

soit tu utilises ce petit plugin tinysort
http://tinysort.sjeiti.com/

[morhead]

Ok je vais fouiller de ce coté la, en tout cas énorme merci pour ton aide et ta patience.

Ca fait 4 ans que j'avais pas codé ^^ (spécialisé en php en plus)