Draggable Jquery et suppression d'éléments du DOM [Fermé]

Signaler
Messages postés
9
Date d'inscription
mercredi 11 janvier 2017
Statut
Membre
Dernière intervention
17 janvier 2017
-
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
-
Salut !

Pourriez-vous m'aider ?

J'ai plusieurs DIV contenant chacune une image d'un personnage avec son nom.

Chacune de ces DIV est en Draggable, et elles sont toutes contenues dans une DIV générale formant le cadre maximum d'évolution.

Tout fonctionne, mais lorsqu'avec une action en Jquery je supprime l'un des personnages, tous les personnages situées en dessous dans le DOM remontent au niveau de leur position (draggable) à l'écran

Auriez-vous une solution pour éviter ça ?

Voici le code correspondant (ce n'est pas l'original, j'ai recréé le truc en plus simple pour poster)

<div id="contenant">
<div id="perso1" class="move">
<img src=""quot;/styles/perso.jpg" />Perso1</div>
</div>
<div id="perso2" class="move">
<img src=""quot;/styles/perso.jpg" />Perso2</div>
</div>
<div id="perso3" class="move">
<img src=""quot;/styles/perso.jpg" />Perso3</div>
</div>
</div>
<input type="button" id="supp1" value="Supprimer perso1" />
<input type="button" id="supp2" value="Supprimer perso2" />
<input type="button" id="supp3" value="Supprimer perso3" />
<script>
$( function() {
$( ".move" ).draggable();
} );
$('#supp1').click(function() {
$('perso1').remove();
})
$('#supp2').click(function() {
$('perso2').remove();
})
$('#supp3').click(function() {
$('perso3').remove();
})
</script>


merci !
PS : j'ai déjà posté sur d'autres forums, mais ma question devient urgente pour un développement, et je n'ai pas de réponses actuellement

2 réponses

Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
294
Bonjour,

En gros, tu nous explique ici que si on admet que tes DIV sont l'un en dessous de l'autre, et que tu supprimes celui du haut (disons le perso 1), le perso 2 prendra sa place et c'est ce que tu ne veux pas ?

Si c'est le cas, plutôt que de supprimer l'élément, tu pourrais changer sa propriété CSS. Je pense à "visible:none". L'élément n'est plus visible, mais il existe toujours dans le DOM et garde ses propriétés CSS width/height.
Messages postés
9
Date d'inscription
mercredi 11 janvier 2017
Statut
Membre
Dernière intervention
17 janvier 2017

Salut !
Pas exactement, je n'ai pas de problèmes à ce que la div 2 prenne la place de la div 1 dans le DOM, mais c'est juste une question de position à l'écran par rapport à un déplacement avec la souris sur la div qui est 'draggable'

Effectivement le fait de masquer la 1 plutôt que la supprimer pourrait résoudre le truc, mais j'ai besoin qu'elle n'apparaisse plus du tout dans le dom car il s'agit d'un élement de formulaire, qui ne doit pas exister dans le champ POST si on clique sur supprimer le personnage (pour être ensuite traité par PHP)

Pas simple à expliquer !
Bon pour résumer, je cherche simplement à figer une position d'un personnage (en le laissant quand même mobile à la souris)
Messages postés
9
Date d'inscription
mercredi 11 janvier 2017
Statut
Membre
Dernière intervention
17 janvier 2017
>
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017

Salut !
Je suis un peu nul, parce que je ne vois pas comment récupérer la class d'un champ de formulaire en php ??
Au passage, j'ai essayé de mettre mon personnage dans une div "contenant", et de ne supprimer que le personnage contenu (en laissant le contenant)
A priori ça fonctionne comme ça
Messages postés
9
Date d'inscription
mercredi 11 janvier 2017
Statut
Membre
Dernière intervention
17 janvier 2017
>
Messages postés
9
Date d'inscription
mercredi 11 janvier 2017
Statut
Membre
Dernière intervention
17 janvier 2017

J'ajoute que j'ai du donner une hauteur fixe à mon contenant, parce qu'en supprimant le personnage, ce contenant ce réduit au strict minimum puisqu'il devient vide
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
294
Exact cette solution est bonne aussi, seulement tu précisais au-dessus de vouloir supprimer l'élément du DOM donc il est vrai que je ne l'ai pas proposé puisqu'ici le DIV persiste.
Ma solution est je pense bien meilleure, dans le sens où s'il s'avère qu'un jour tu doive modifier tes images, dans ton cas tu devras modifier ton CSS afin que la propriété height s'aligne avec celles-ci, dans mon cas le simple fait de cacher le DIV s'adapte avec n'importe quelle taille d'image.

Pour ce qui est du PHP, je ne suis pas le plus calé pour répondre, cependant je peux te renvoyer vers ce tuto.
Messages postés
9
Date d'inscription
mercredi 11 janvier 2017
Statut
Membre
Dernière intervention
17 janvier 2017
>
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017

Oui tu as tout a fait raison, ceci étant je crois qu'il n'est pas possible de récupérer les class en PHP, car $_POST ne traite que les contenus de champs
Messages postés
333
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
14 mars 2017
294 >
Messages postés
9
Date d'inscription
mercredi 11 janvier 2017
Statut
Membre
Dernière intervention
17 janvier 2017

Deux solutions s'offrent à toi. En php tu peux récupérer la "value" ou le "name".
- Soit tu donne le même "name" que ta classe
- Soit tu ajoute un input "hidden" qui possède la value de ta classe