Перетащите & amp; удалить базу данных изображений

У меня есть сопротивление & уронить систему на моем сайте и нуждаюсь в помощи. Сайт о схемах
и управлять ими. Вы знаете, вставляя схему с помощью перетаскивания & сбросить систему и показать их
из базы данных впоследствии. На самом деле все работает нормально, но для сайта они тоже нужны
редактировать схемы. Так что проблема в редактировании схемы, это главная история.

Теперь давайте будем более конкретными:

$(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);
}
}
});
});

А вот и бросаемые дивы:

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
}

А вот мои данные (иконки, которые вы можете перетащить):

<?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;
}
}
?>

В результате, когда я получаю что-то вроде этого:

Когда я перетаскиваю значок из основного списка в раскрывающиеся элементы div, появляется новое изображение / клон
генерируется и заменяется в div. И когда значок / изображение приходит из другого слота, они просто меняются местами.

На странице редактирования я в основном получаю элементы из базы данных и извлекаю их все.
Затем я добавил картинки в элементы DROPBABLE, чтобы их можно было перетаскивать, выполнив это:

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>';

И затем добавил это к сценарию:

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'
});

Как результат, это то, что я получаю, и это проблема на самом деле:

Наконец, извините за это длинное объяснение, но я попытался быть очень конкретным и объяснить это
хорошо. Проблема в том, что когда я перетаскиваю уже уроненное изображение из выпадающих элементов div,
вход теряет свой идентификатор / значение. Буду очень признателен за любую помощь! И, пожалуйста, не
просто опубликуйте ссылку на перетаскиваемую библиотеку, потому что я очень хорошо искал по этому вопросу и мне нужна реальная помощь здесь.
Заранее спасибо.