title: How to save drag moves into database
body: <p>happy new year!!!</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              html,
      body {
        margin: 0;
      }
      
      table {
        border-collapse: collapse;
      }
      
      td span {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #09C;
        font-weight: bold;
      }
      
      img {
        padding: 10px;
      }
      
      #dragtable {
        border-collapse: collapse;
      }
      
      #dragtable th,
      #dragtable td {
        border: 1px solid black;
      }
          &lt;/style&gt;
          &lt;script src=&quot;/scripts/snippet-javascript-console.min.js?v=1&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;table id=&quot;targetTable&quot; class=&quot;b&quot; border=&quot;10&quot; bordercolor=&quot;blue&quot; id=&quot;myT&quot;&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt; 1&lt;/td&gt;
            &lt;td&gt; 2&lt;/td&gt;
            &lt;td&gt; 3&lt;/td&gt;
            &lt;td&gt; 4&lt;/td&gt;
            &lt;td&gt; 5&lt;/td&gt;
            &lt;td&gt; 6&lt;/td&gt;
            &lt;td&gt; 7&lt;/td&gt;
            &lt;td&gt; 8&lt;/td&gt;
            &lt;td&gt; 9&lt;/td&gt;
            &lt;td&gt; 10&lt;/td&gt;
            &lt;td&gt; 11&lt;/td&gt;
            &lt;td&gt; 12&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt; 24&lt;/td&gt;
            &lt;td&gt; 23&lt;/td&gt;
            &lt;td&gt; 22&lt;/td&gt;
            &lt;td&gt; 21&lt;/td&gt;
            &lt;td&gt; 20&lt;/td&gt;
            &lt;td&gt; 19&lt;/td&gt;
            &lt;td&gt; 18&lt;/td&gt;
            &lt;td&gt; 17&lt;/td&gt;
            &lt;td&gt; 16&lt;/td&gt;
            &lt;td&gt; 15&lt;/td&gt;
            &lt;td&gt; 14&lt;/td&gt;
            &lt;td&gt; 13&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
      
      &lt;table id=&quot;dragtable&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;td&gt;ID&lt;/td&gt;
            &lt;td&gt;TO&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
          &lt;script type=&quot;text/javascript&quot;&gt;
              const items = [{
          id: 0,
          dataid: &quot;a&quot;,
          type: &quot;red&quot;,
          src: &quot;https://i.imgur.com/ZEZLSOo.png&quot;,
          draggable: 2,
          position: 12,
          alt: &quot;Norway&quot;,
        },
        {
          id: 1,
          dataid: &quot;b&quot;,
          type: &quot;red&quot;,
          src: &quot;https://i.imgur.com/ZEZLSOo.png&quot;,
          draggable: 2,
          position: 12,
          alt: &quot;Norway&quot;,
        },
        {
          id: 2,
          dataid: &quot;a&quot;,
          type: &quot;black&quot;,
          src: &quot;https://i.imgur.com/dL3J8XS.jpeg&quot;,
          draggable: 2,
          position: 13,
          alt: &quot;Norway&quot;,
        },
        {
          id: 3,
          dataid: &quot;b&quot;,
          type: &quot;black&quot;,
          src: &quot;https://i.imgur.com/dL3J8XS.jpeg&quot;,
          draggable: 2,
          position: 13,
          alt: &quot;Norway&quot;,
        }
      ]
      
      const itemHTML = (item) =&gt; {
        return `
          &lt;span
            class=&quot;event&quot;
            data-id=&quot;${ item.dataid }&quot;
            draggable=&quot;${ !!item.draggable }&quot;
          &gt;
           ${ item.dataid } &lt;img
              data-imgid=&quot;${ item.id }&quot;
              src=&quot;${ item.src }&quot;
              class=&quot;b&quot;
              alt=&quot;${ item.alt }&quot;
              style=&quot;width: 30%;&quot;
            /&gt;
          &lt;/span&gt;
        `
      }
      
      // redrawing the table based on item attributes
      const updateTable = (table, items) =&gt; {
        $(table).find('td').each(function(i, e) {
          let html = ''
          const filtered = items.filter(({
            position
          }) =&gt; position - 1 === i)
          if (filtered.length) {
            filtered.forEach(item =&gt; {
              html += itemHTML(item)
            })
          } else {
            html = !$(e).parent().index() ? i + 1 : 24 - $(e).index()
          }
          e.innerHTML = html
        })
      }
      
      updateTable('#targetTable tbody', items)
      
      const dragrowHTML = ({
        id,
        to
      }) =&gt; {
        return `&lt;tr&gt;&lt;td&gt;${ id }&lt;/td&gt;&lt;td&gt;${ to }&lt;/td&gt;&lt;/tr&gt;`
      }
      
      $(function() {
        initDragAndDrop();
      });
      
      function clearDragAndDrop() {
        $('.event').off();
        $('#targetTable td').off('dragenter dragover drop');
      }
      
      function initDragAndDrop() {
        $('.event').on('dragstart', function(event) {
          const itemid = event.target.getAttribute('data-imgid')
          var dt = event.originalEvent.dataTransfer;
          //add dat-attr and class from where to remove
          dt.setData('id', itemid);
        });
      
        $('.event').on('dragend', function(event) {
          clearDragAndDrop();
          initDragAndDrop();
        });
      
        // updated event handling
        $('#targetTable td').on('dragenter dragover drop', function(event) {
          event.preventDefault();
          if (event.type === 'drop') {
            const itemid = event.originalEvent.dataTransfer.getData('id');
            const item = items.find(({
              id
            }) =&gt; id == itemid)
            // if item is draggable
            if (item &amp;&amp; item.draggable) {
              // calculate position
              item.position = ($(event.target).parent().index() * $(event.target).parent().children().length) + ($(event.target).index() + 1)
              // update table
              updateTable('#targetTable tbody', items)
              // update item's draggable property
              $('#dragtable tbody').append(dragrowHTML({
                id: item.id,
                position: item.position
              }))
              item.draggable--
            }
          }
        });
      }
          &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>If you run this code then you will have a table that you actually move images through the table and creating a new table with name &quot;dragtable&quot;. I want to save the dragtable ,into my database, the values it takes(Id and position).As a result the problem is with my php code..as you can understand it is id the image and position where it goes in the table.My php code is this</p>
  <pre class="lang-php prettyprint-override"><code>    // I fill with my  connection - I got this code from stackoverflow from another question and I fill my infos
      $pdo = 'mysql:host=localhost;dbname=backen'; 
          $username = 'root'; 
          $pwd=''; 
          try {
              $db = new PDO($pdo, $username, $pwd);
              echo&quot;connected to database&quot;;
          }
          catch (PDOException $e) {
              $error_message = $e-&gt;getMessage();
              echo &quot;this is displayed because an error was found&quot;;
              exit();
      }
      
      //require('path/to/pdo/connection/stateme.nts'); I didn't quite understand how that works ,nor find similar thats why I create it that up .I had similar connection require &quot;c/dbconnect.php&quot;;
      
      $pdo-&gt;setAttribute(PDO::ATTR_EMULATE_PREPARES, TRUE);     
       //a nice guy help me with that but here I got an error on that $pdo-&gt; , the error of lines it shows me is those  
  //connected successfuly
  //Fatal error: Uncaught Error: Call to a member function setAttribute() on string in //C:\Xampppp\htdocs\Myproject Stack trace: #0 {main} thrown in C:\Xampppp\htdocs\ in this line with $pdo-&gt;setAttribute
      
      $query = &quot;
      SELECT *
        FROM my_table
       ORDER
          BY position
      &quot;;
      $stmt  = $pdo-&gt;prepare($query);
      
      $stmt-&gt;execute();
      $data  = $stmt-&gt;fetchAll();
      print_r($data);
      
      $query = &quot;
      UPDATE my_table x
        JOIN
           ( SELECT image
                  , position old_order
                  , ROUND(CASE WHEN position NOT BETWEEN LEAST(:old_position,:new_position) AND GREATEST(:old_position,:new_position)
                               THEN position
                               WHEN position = :old_position THEN :new_position
                               ELSE position+(((:old_position&gt;:new_position)-.5)*2)
                               END
                         ,0) new_order
               FROM my_table
           ) y
          ON y.image = x.image
         SET position = new_order
      &quot;;
      
      $old_position  = $_GET['old_position'];
      $new_position  = $_GET['new_position'];
      
      $stmt  = $pdo-&gt;prepare($query);
      $stmt-&gt;execute(array('old_position' =&gt; $old_position,'new_position' =&gt; $new_position));
      
      ?&gt;
  </code></pre>
  <p>Let's do a conclusion,</p>
  <ol>
  <li>First,I am connected - It shows me message connected to database,I
  added that to my code.I think I am ok with that part.</li>
  <li>Second on that line I have error with I search it but I didn't
  managed to do that <strong>$pdo-&gt;setAttribute(PDO::ATTR_EMULATE_PREPARES,
  TRUE);</strong>
  3.For more information,not to solve it if it is difficult,is there another way to pass the dragtable table ( the dragging moves) into a database except for that way? if you can find another way I to do it ,because I can't figure out a way to do that..or send me similar ways how to do it ,because I am searching so long how to put my table into a database.As a result the next time someone will get in will remember &quot;saved&quot; the moves I did.
  Thanks in advance.</li>
  </ol>