1
我有一个拖动&拖放系统在我的网站和需要帮助。该网站是关于计划
和管理他们。你知道，插入方案使用拖动系统，然后从数据库中显示它们
。实际上一切正常，但对于网站他们还需要
编辑方案。所以问题在于编辑方案，这是主要的故事。
现在，让我们更具体：
拖放数据库图片
$(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中。而当图标/图像来自另一个插槽时，他们只需交换。
在编辑页面中，我基本上从数据库中获取项目并获取所有项目。
然后我添加的照片中可放开申报单，使他们能够再次拖累，这样做：
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中拖动一个已经丢弃的图像时，输入会丢失它的id /值。我真的很感激任何帮助！并且请不要
只发布可拖动库的链接，因为我在这方面搜索得非常好，并且需要实际的帮助。
预先感谢您。