Méthodes draggable() et resizable() sur éléments ajoutés

Bonjour,

Je bloque avec un programme que vous trouverez ici => https://jsfiddle.net/Florent27000/n421kmjx/4/

la fonction draggable(), resizable() fonctionne très bien sur un élément présent au chargement de la page, mais lorsque que je fais un ajout via le bouton, l'élément ajouté ne peut pas être déplacé...
si quelqu'un a une solution...
Merci d'avance

C’est parce qu’il faut initialiser également l’élément ajouté, en appelant .draggable() et .resizable() dessus. (Au passage, je n’ai pas réussi à redimensionner l’élément dans ton exemple.)
Pour appeler des méthodes jQuery sur un élément, il faut déjà avoir une référence dessus. Tu peux utiliser un sélecteur après l’avoir ajouté, mais je pense que c’est plus efficace de changer légèrement la syntaxe, comme ceci :

Code:

---

1 2

const nouvelElement = $('<div class="resizeDiv ui-draggable ui-draggable-handle ui-resizable" style="left: 388px; top: 17px; width: 78px; height: 65px;" id="5"><div class="id_button">2</div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div>'); $('#dqip').append(nouvelElement);

---

Ainsi, tu peux l’initialiser :

Code:

---

nouvelElement.draggable().resizable();

---

Note : pense à déplacer le code CSS vers un endroit plus adapté ;)

J’ai forké le fiddle que tu as donné, mais il y a toujours le problème du resizable qui ne marche pas : https://jsfiddle.net/e96r1z5v/

Merci pour ta réaction

J'ai retouché à la valeur append, et passé jquery en 1.9.1 resizable() n'est pas pris en compte sur la 1.8

tout fonctionne comme https://jsfiddle.net/Florent27000/e13xfuzr/3/

J'ai une question toujours sur le même sujet, pour les événements qui doivent se déclencher sur les éléments ajoutés

actuellement, je transforme les actions jquery en function afin de pouvoir les initialiser avec les éléments ajoutés.

Code:

---

1 2 3

$('.resizeDiv').dblclick(function() {// detection le double clic sur l'objet alert("Double clic"); });

---

Remplacé part:

Code:

---

1 2 3 4 5

function DoubleClick(variable) { $('.'+variable).dblclick(function() {// detection le double clic sur l'objet alert("Double clic"); }); }

---

Pour l'initialiser du coup je fais

Code:

---

nouvelElement+DoubleClick("resizeDiv");

---

Vous pouvez consulter en live ici Lien jsfiddle.net

la question que je me pose, c'est es que c'est vraiment propre... et y a t'il une autre solution ?

Merci pour votre retour

Bonjour,

Citation:

---

J'ai une question toujours sur le même sujet

---

il vaut mieux ouvrir une nouvelle discussion :

https://www.developpez.com/template/kit/kitinfo.png

Une discussion = une question Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue. Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

Merci.