Save data to database with Drag & Drop

Question

I’m having some problems to insert an ordering in the database, I’m using a Drag and Drop system, which I downloaded on the net and the system works exactly as I need and want.

Only that I am with a problem to be solved, which is to save the order of Drag and Drop system in the database.

The idea is this, the client wants a gallery system that drags the photos from the gallery, so that it is in the order that he determined, drag & drop already does this. I can already recover the ID of each image. Now all I need to do is determine a value like counting from 1 to the amount of images, like: if it has 10 images and the client has done the ordering. I need to list the numbers from 1 to 10, and save these numbers in the table, in the order field, so that when I list the images on the site I order exactly in order.

I don’t know if you can understand, but I’ll show you the excerpt from my code.

<div id="redips-drag">
   <?php
   $order = filter_input_array(INPUT_POST, FILTER_DEFAULT);

   if (isset($order['SelectOrdem']) AND $order['SelectOrdem'] == 'Salvar Ordem'):
      unset($order['SelectOrdem']);
   endif;
   ?>

<form action="" method="post">
   <table style='width:100%;'>
      <colgroup>
         <col width="250"/>
         <col width="250"/>
         <col width="250"/>
         <col width="250"/>
      </colgroup>
      <tbody>
         <tr>
         <?php
         $gbi = 0;
         $Gallery = new Read;
         $Check = new Check;
         $Gallery->ExeRead("ws_posts_gallery", "WHERE post_id = :post", "post={$postid}");

         if ($Gallery->getResult()):    
            $LoopHorizontal = 4;
            $i = 1;

            foreach ($Gallery->getResult() as $gb):
               if ($i < $LoopHorizontal):
                   $gbi++;
                   ?>
                   <td>
                   <div class="redips-drag">
                      <input type="text" name="ordem[]" value="<?= $gbi; ?>">
                      <input type="text" name="id[]" value="<?= $gb->gallery_id; ?>">
                      <?= $Check->Image('../uploads/' . $gb->gallery_image, $gbi, 146, 100); ?><br>
                      <a href="painel.php?exe=produtos/update&postid=<?= $postid; ?>&gbdel=<?= $gb->gallery_id; ?>#gbfoco" class="del btn btn-danger">Deletar</a>
                      </div>
                   </td>

                   <?php elseif ($i = $LoopHorizontal):
                   ?>

                   <td>
                   <div class="redips-drag">
                      <input type="text" name="ordem[]" value="<?= $gbi; ?>">
                      <input type="text" name="id[]" value="<?= $gb->gallery_id; ?>">
                      <?= $Check->Image('../uploads/' . $gb->gallery_image, $gbi, 146, 100); ?><br>
                      <a href="painel.php?exe=produtos/update&postid=<?= $postid; ?>&gbdel=<?= $gb->gallery_id; ?>#gbfoco" class="del btn btn-danger">Deletar</a>
                   </div>
                   </td>
                </tr>
                <tr>
                <?php
                $i = 0;
                endif;
             $i++;
             endforeach;
          endif;
          ?>
          </tr>
       </tbody>
    </table>
    <div class="form-actions">
       <input type="submit" class="btn btn-primary green" value="Salvar Ordem" name="SelectOrdem" />
    </div>
  </form>
</div>

I don’t know guys, if I did it right there, like I wrapped the drag & drop table in a form, to try to recover the values, more unsuccessfully.   If anyone can help with this problem, I am most grateful!

Answer 1

Man, I’ve done it like this: I created a class in a TD for reference via jquery; within that td I created an input with name array and the key is the product id; at the time of clicking the reorder button, I saved the order of td through each in jquery, passing the Dice to the value of the input keyed with the id. at the time of saving, is the correct order determined by the user

image Array { 1: 0, 15: 1, 95: 2 ... }

for example: html:

<td class="imagem" width="50" align="center">
 <img src='/img/imagem.png'>
<input type="hidden" name="imagens[<?= $id; ?>] ?>]" value="">
</td>

---

 function reordena(){
        $(".imagem").each(function(i){
           $(this).children().val(i);
        });

        $("#form").submit();
    }

php:

foreach($_POST['images'] as $id => $odem){

$order /here vc have the order selected $id // here you have id }