拖放数据库图像

Question

我的网站上有一个拖放系统，需要帮助。该网站是关于计划的
并管理它们。你知道，使用拖放系统插入方案并显示它们
之后从数据库中。实际上一切正常，但对于他们还需要的网站
编辑方案。所以问题出在编辑方案上，这是主要故事。

现在让我们更具体一点：

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

下面是可投放的 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
}

这是我的数据（您可以拖动图标）：

<?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 时，新的 image/clone 是
在 div 中生成并替换。当 icon/image 来自另一个插槽时，它们只是交换。

在编辑页面中，我基本上是从数据库中获取项目并获取所有项目。
然后我在 droppable divs 中添加了图片，这样它们就可以再次拖动，方法是：

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

结果，这就是我得到的结果，这实际上是问题所在：最后，对于这么长的解释感到抱歉，但我试图非常具体地解释它
好的。问题是，当我从可放置的 divs,
中拖动一个已经放置的图像时输入失去了它的 id/value。我真的很感激任何帮助！请不要
只是 post 可拖动库的 link，因为我在这方面搜索得很好，在这里需要实际帮助。
提前谢谢你。

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


}

我就这样解决了。谢谢？ :)

拖放数据库图像

Drag & drop database images

php

jquery

drag-and-drop

image