Drag & drop database images

Question

I have a drag & drop system in my website and in need for help. The website is about schemes
and managing them. You know, inserting scheme using a drag & drop system and showing them
from the database afterwards. Everything works fine actually, but for the website they also need
to edit the schemes. So the problem is in editing the scheme, this is the main story.

Now let's be more specific:

$(function(){
  /* D-n-D SYSTEEM */
  $('.DraggedItem').draggable({
      helper: 'clone',
      cursor: 'move',
      opacity: 0.7
  });

  var droppedOptions = {
      revert: 'invalid',
      cursor: 'move'
  };

  $('.DeleteZone').droppable({
      drop: function(ev, ui) {
          var dropped = ui.draggable;
          var draggedFrom = ui.draggable.parent();

          if(ui.draggable.is('.DroppedItem')) {
                  dropped.remove();
                  draggedFrom.next('input').val("");         
          } else {
              // Pictogram komt uit de lijst
          }
      }
  });

  $('.DropZone').droppable({
      drop: function(ev, ui) {
          var dropped = ui.draggable;
          var droppedOn = $(this);

          if(ui.draggable.is('.DroppedItem')) {
              // Als de pictogram komt van een andere rangnr

              var draggedFrom = ui.draggable.parent();
              droppedOn.find('img').appendTo(draggedFrom);
              dropped.css({ top:0, left:0 }).appendTo(droppedOn);

              var temp = '' + droppedOn.next('input').val();
              draggedFrom.next('input').val(temp);
              droppedOn.next('input').val(dropped.data('id'));
          } else {
              // De pictogram komt uit de lijst

              droppedOn
                  .empty() // Verwijder de huidige pictogram
                  .next('input')
                      .val(dropped.attr('id'));

              $('<img class="DroppedItem" width="90" height="90">')
                  .attr('src', dropped.attr('src'))
                  .data('id', dropped.attr('id'))
                  .draggable(droppedOptions)
                  .appendTo(droppedOn);
          }
      }
   });
});

And here are the droppable divs:

while($row = mysqli_fetch_assoc($res)) {
?>
<tr>
    <input type="hidden" value="<?php echo $row["IDBewoner"] ?>" name="bewoner[]">
    <td>
        <?php echo $row["IDBewoner"] ?>
    </td>
    <td>
        <img src="data:image/jpeg;base64,<?php echo base64_encode($row['Foto']); ?>" width='90' height='90'>
    </td>
    <?php for($i=1; $i < $aantalRangnr; $i++) {
        $owner_id = $i.$row["IDBewoner"]; ?>
    <td> 
        <div id="rang<?php echo $owner_id; ?>" class="DropZone"></div> 
        <input type="hidden" value="" id="rang<?php echo $owner_id; ?>input" name="rang[<?php echo $row["IDBewoner"]; ?>][<?php echo $i; ?>]" />
    </td>
    <td>
    </td>
    <?php }
    ?> 
    <td><img src="../../img/DeleteZone.png" class="DeleteZone" draggable="false"/></td>
    <?php
}

And here is my data (icons you can drag):

<?php 
$sql = "SELECT IDPictogram, Pictogram FROM Pictogrammen WHERE PictoType = 1";
$res = mysqli_query($mysqli, $sql);
$teller = 0;
while($row = mysqli_fetch_assoc($res)) {
    $teller ++;
    ?>                            
    <td> <?php echo "<img class='DraggedItem' id='".$row["IDPictogram"]."' src='data:image/jpeg;base64,".base64_encode($row['Pictogram'])."' width='90' height='90' draggable='true'>"; //ondragstart='drag(event)' ?> </td>
    <?php
    if($teller == 10) {
        echo "</tr><tr>";
        $teller = 0;
    }
}    
?>

As a result, when I get something like this:

When I drag an icon from the main list to the droppable divs, a new image/clone is
generated and replaced in the div. And when the icon/image comes from another slot, they simply swap.

In the editing page, I basically get the items from the database and fetching all of them.
Then I added the pictures in the droppable divs so they can be dragged again, by doing this:

echo 
'<td>
  <div class="DropZone">
      <img class="AlreadyDroppedItem" id="'.$rowRang["IDPictogram"].'" src="data:image/jpeg;base64,' . base64_encode($rowRang['Pictogram']) . '" width="90" height="90" draggable="true">
  </div>
  <input type="text" value="'.$rowRang["IDPictogram"].'" name="rang['.$row["IDBewoner"].']['.$r.']">
</td>'; 

And then added this to the script:

else if(dropped.is('.AlreadyDroppedItem')) {

  var draggedFrom = ui.draggable.parent();
  var temp = '' + droppedOn.next('input').val();
  draggedFrom.next('input').val(temp);
  droppedOn.next('input').val(dropped.data('id'));

  droppedOn.find('img').appendTo(draggedFrom);
  dropped.css({ top:0, left:0 }).appendTo(droppedOn);

}


$('.AlreadyDroppedItem').draggable({
   helper: 'original',
   cursor: 'move'
});

As results, this is what I get and this is the problem actually: Finally, sorry about this long explanation but I tried to be very specific and explain it
good. The problem is that when I drag an already-dropped-image from the droppable divs,
the input looses its id/value. I would really appreciate any kind of help! And please don't
just post the link of the draggable library because I searched really good on this and need actual help here.
Thank you in advance.

Answer 1

else if(dropped.is('.AlreadyDroppedItem')) {

  var draggedFrom = ui.draggable.parent();
  var temp = '' + droppedOn.next('input').val(); //3de plaats 

  droppedOn.find('img').appendTo(draggedFrom);
  droppedOn.next('input').val(draggedFrom.next('input').val());

  draggedFrom.next('input').val(temp);

  dropped.css({ top:0, left:0 }).appendTo(droppedOn);


}

I solved it like that. Thanks? :)