Discussion :

[djo007]

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

[Watilin]

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 :

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

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 :

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

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/

[djo007]

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/

[djo007]

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 :

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

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

Remplacé part:

Code :

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

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 :

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

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

[NoSmoking]

Bonjour,

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

il vaut mieux ouvrir une nouvelle discussion :

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.