UI Draggable et Droppable, comment utiliser la fonction clone() ?

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:

---

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.

Bonsoir.

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

Code:

---

1 2 3 4 5

$("#draggable").draggable({ helper: 'clone', revert: 'invalid' });

---

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:

---

1 2 3 4 5

$(".draggable").draggable({ helper: 'clone', revert: 'invalid', });

---

L'élément qui reçoit :

Code:

---

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).

Citation:

---

Envoyé par scfi1

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.

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:

---

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:

---

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.

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

Code:

---

<div class="draggable">

---

le "draggable" je le met où ?

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:

---

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

---

Et tu lances le test :

Code:

---

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é.