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

以下是可放弃的div：

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

结果，当我得到这样的东西时：
enter image description here

当我将图标从主列表拖到可放置div时，新图像/克隆为
生成并替换为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'
});

结果，这就是我得到的，这实际上是问题所在： enter image description here 最后，抱歉这个冗长的解释，但我试着非常具体并解释它好。问题是，当我从droppable div中拖出已经掉落的图像时，
输入会丢失其id /值。我真的很感激任何帮助！请不要只是发布可拖动库的链接，因为我在这里搜索得非常好，需要实际的帮助。
提前谢谢。

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


}

我解决了这个问题。谢谢？：）

拖拽删除数据库图像

1 个答案: