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=""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