11521 sujets

JavaScript, DOM et API Web HTML5

Draggable Jquery et suppression d'éléments du DOM

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="/styles/perso.jpg" />Perso1</div>
    </div>
    <div id="perso2" class="move">
        <img src="/styles/perso.jpg" />Perso2</div>
    </div>
    <div id="perso3" class="move">
        <img src="/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 !
Bonjour
Ça me semble loqique comme comportement, c'est le contraire qui serait étonnant.
Quand vous supprimez un élément, il n'est plus là et la page est recalculée en conséquence.
Qu'est-ce que vous voudriez qui se passe?
Bonjour,

Désolé j'étais absent ces derniers jours
Oui effectivement c'est logique comme comportement, mais c'est justement l'inverse que je veux Smiley smile
J'ai besoin que la position après déplacement à la souris reste fixe si l'on supprime un personnage précédent (mais reste mobile quand même si déplacement à la souris)
Ok pas très complex, en même temps tu #remove la "div" entière, au lieu de remove celle ci essaye de remove uniquement l'image et le nom. Le but est de remove le contenue et non le contenant.

    <div id="perso1" class="move">
		<div id="content1">
			<img src="/styles/perso.jpg" />Perso1</div>
		</div>
    </div> 
	
	
	$('#supp1').click(function() {
		$('content1').remove(); 
	})
Salut !
OK, mais en supprimant le contenu uniquement, la div container ne va pas se réduire au minimum niveau hauteur ? Car si l'image qu'elle contient est grande, on risque de réduire la Div en supprimant l'image non ?
euH.... dans la logique ce n'est pas le conteneur qui fait la taille du contenant surtout si c'est une image.. en tout cas pour moi..
Salut !
Oui effectivement ça fonctionne, je viens de tester. Merci, ça m'aide beaucoup
La solution est donc de supprimer une div contenu dans une autre

bravo !
Re
j'ajoute que j'ai du donner une hauteur fixe au contenant, car en supprimant son contenu (le personnage avec son image), ce contenant se réduisait au minimum puisqu'il devenait vide
Sujet clos
Aller à