Discussion :

[scfi1]

Bonjour la communauté,

J'utilise Jquery (version 1.3.2) couplé à ui.draggable et ui.droppable (en version 1.7.2).

Le principe est simple, j'ai à gauche une zone "d'outils" qui sont "draggable" et à droite une zone ou j'insère mes outils (qui est donc "droppable").

Je les déplace sans soucis, enregistre leur positions... Etc, etc.
Mais le problème c'est qu'un fois placé, le div n'est plus dans la zone d'outil.

L'idéal : Un clone est créé dans la zone droppable (tout en restant draggable).

J'utilise :

Code :

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

1
2
helper:'clone' => dans la fonction $(".objet").draggable
$(this).append(ui.draggable.clone());

Mais celà ne fonctionne pas du tout (le clone est crée à gauche, à droite il n'a pas gardé le style... Etc.)

Merci de votre aide.

[danielhagnoul]

Bonsoir.

Voir la documentation : http://jqueryui.com/demos/draggable/#sortable

Code :

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

1
2
3
4
5
 
$("#draggable").draggable({
	helper: 'clone',
	revert: 'invalid'
});

[scfi1]

Bonjour,

Navré pour le titre et la balise code, et merci de votre réponse.

Évidemment, j'avais déjà bien fouillé la doc.
Je suis reparti d'un test simple, deux div un qui drag l'autre qui drop, et on clone.

Je pense que je raisonnais à l'envers... Voici la solution pour ceux qui vont se prendre la tête avec ça ^^.

Les éléments que l'on souhaite bouger :

Code :

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

1
2
3
4
5
 
$(".draggable").draggable({
	helper: 'clone',
	revert: 'invalid',
});

L'élément qui reçoit :

Code :

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

1
2
3
4
5
6
 
$("#droppable").droppable({
	drop : function(event, ui){
	$(this).append(ui.helper.clone().removeClass("ui-draggable-dragging").draggable({helper:'original'}));
}
});

J'ai par contre ajouter une autre classe, et je teste si elle existe avant de cloner.
Si elle existe je clone et je la supprime (c'est pour éviter qu'il se clone à l'infini quand on redéplace l'objet).

[virginweb]

J'ai par contre ajouter une autre classe, et je teste si elle existe avant de cloner.
Si elle existe je clone et je la supprime (c'est pour éviter qu'il se clone à l'infini quand on redéplace l'objet).

Bonjour,

peut-tu développer et peut-être poster ton code ?
J'ai ce problème de clonage à l'infini...

Merci.

[scfi1]

Bonjour,

Concrètement, mes objet que je peux "drag" ont une classe.
Une fois que je les ai déjà drag, c'est une autre classe qui remplace.

Je teste donc si cette classe existe avant de cloner. Si elle existe, alors je clone, sinon je déplace simplement l'objet (je ne clone pas).

Exemple :
Dans ton objet "droppable".

Code :

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

regex = new RegExp("\\bnom_classe\\b");

Tu initialises une regex avec le nom de ta classe.

Ensuite tu testes si la classe existe et exécute plusieurs actions à la chaine :

• Suppression de classe
• Ajout de classe
• Clonage

Code :

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

1
2
3
4
 
if(regex.test(ui.helper.attr('class'))){
	$(this).append(ui.helper.clone().removeClass("ui-draggable-dragging").removeClass("nom_classe").addClass('nouveau_nom_classe').draggable({helper:'original'}));
				}

J'espère que celà t'aidera.

[virginweb]

Merci pour ta réponse mais j'ai pas tout compris
Si j'ai une

Code :

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

<div class="draggable">

le "draggable" je le met où ?

[scfi1]

J'imagine que ça c'est ton div de base que tu veux déplacer.

Quand tu le déposes, il faut tester s'il possède cette classe.
S'il la possède, alors tu clones, sinon tu changes la classe. Cela permettra après de ne pas recloner.

Concrètement :

Initialisé ta regex (dans le drop de l'objet droppable) :

Code :

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

regex = new RegExp("\\bdraggable\\b");

Et tu lances le test :

Code :

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

1
2
3
4
 
if(regex.test(ui.helper.attr('class'))){
	$(this).append(ui.helper.clone().removeClass("ui-draggable-dragging").removeClass("draggable").addClass('nouveau_nom_classe').draggable({helper:'original'}));
				}

Tu supprimes les classes "ui-draggable-dragging" et "draggable", tu ajoutes une nouvelle classe (optionnel), et tu le rends déplaçable avec un helper "original" et non "clone".

Quand tu redéplaceras cet objet, il ne passera pas le test de la regex car la classe "draggable" n'existe plus, et il ne sera donc pas cloné.