Discussion :

[BROADSIDER]

Bonjour,
Je suis actuellement à la recherche d'une fonction javascript qui me permettrais de cloner un objet dans une une div différente de celle d'origine d'un simple clic, j'ai mit en place le bouton et le onclick, mais n'étant pas un pro du javascript je ne sais pas comment faire pour cloner l'objet et l'envoyer dans une autre div

Voici le bouton que j'ai créé

Code :

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

1
2
 
var htmlBtn2 = "<span class='btn-open' title='Ajouter' onclick='clone2(this)'>+</span>";

et la fonction qui pour l'instant ne fait qu'appel à une autre fonction ...

Code :

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

1
2
3
4
 
function clone2(){
    Update();     
}

[NoSmoking]

Bonjour,
j'ai quand même l'impression que tu ne fais pas beaucoup d'effort

n'étant pas un pro du javascript je ne sais pas comment faire pour cloner l'objet ...

Il ne faut pas que cela devienne une fatalité d'autant que je me cite :

(...)e te mets un lien vers une discussion qui devrait t'intéresser : Drag and drop méthode setData pour dataTransfert.

Un exemple de réalisation est même fourni : https://www.developpez.net/forums/d1.../#post10349325.

Tout est dedans !

[BROADSIDER]

J'ai lu et ai retravaillé les codes fournis, mais tout cela est concentré sur le DnD, or se que je cherche c'est en cliquant sur un bouton envoyer une image dans un conteneur donc il n'est plus question de DnD, donc je pensais en réexploitant certaine partie du DnD qui permette le clonage de l'objet d'obtenir ce que je désir mais cela ne fonctionne pas...

[NoSmoking]

Qu'est ce qui t'empêche d'extraire du code d'une fonction pour le mettre dans une autre, le seul impératif est de comprendre ce que l'on fait et si l'on ne comprend pas de chercher ce que font les méthodes utilisées.

Si j'extrais un passage d'une des fonctions, et on se fout de savoir si elle est dans un contexte D&D, j'obtiens :

Code :

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

1
2
3
4
5
// clonage élément
var clone = elem.cloneNode(true);
//  ajout événement car les événements ne sont pas clonés
// on peut oublier celle-ci pour la compréhension -> clone.addEventListener("dragstart", handleDragStart, false);
oDest.appendChild(clone);

il te suffit de définir l'élément à cloner, elem dans le code, et l'élément destination, oDest dans le code.

Ressources (sur MDN):

• element.cloneNode
• element.appendChild

[BROADSIDER]

Encore merci à toi nosmocking, tu m'as encore une fois permis de progresser, je met la fonction ici s'il y'en a qui désirais la réutiliser ainsi que la création du bouton en js permettant d'ajouter l'image:

Code :

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

1
2
3
4
5
6
7
function clone2(elem){
    var elem= elem.parentNode;
    var clone = elem.cloneNode(true);
    var oDest= document.getElementById('cartArea');
    oDest.appendChild(clone);
    Update();     
}

Code :

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

var htmlBtn = "<span class='btn-open' title='Ajouter' onclick='clone2(this)'>+</span>";