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 /值。我真的很感激任何幫助！並且請不要
只發布可拖動庫的鏈接，因爲我在這方面搜索得非常好，並且需要實際的幫助。
預先感謝您。