title: Draggable With Database PHP and MYSQL
body: <p>So I'm making a Video Game online, and my players have Inventory and Profiles.</p>
  
  <p>I'm trying to make it Load the Inventory into a Canvas, and then make the Items Draggable anywhere on it, then there's a Save Button to save it.</p>
  
  <p>So it will only Load the Items it has Added into The Room already. So lets say I added a Chair, Desk, Bed from inventory into The Database, Room.</p>
  
  <p>Those items should show up on the Profile.</p>
  
  <p>But how can I make them move and Draggable with a Save Button?</p>
  
  <p>This is my site right now if you want to check it out.
  www.lupekid.com</p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>If you look at my site, I only have done it though PHP Clicks. But I'm trying to change it to do Draggable and I'm not sure where to start. I'm trying to do it like this: </p>
  
  <p><a href="http://jsfiddle.net/jakecigar/v685v9t6/31" rel="nofollow">jsfiddle.net/jakecigar/v685v9t6/31</a></p>
  
  <p>but I'm not sure how to integrate it with my database, I'm not that familiar with jQuery.</p>
  
  <pre><code>public function DisplayMyBeds2()
  {
  
      $myuserid = $_SESSION['user_id'];
      // This first query is just to get the total count of rows
      $sql = "SELECT COUNT(*) FROM myitems WHERE (user_id='$myuserid' AND itemCategory='bed')";
      $query = mysqli_query($this-&gt;_con, $sql);
      $row = mysqli_fetch_row($query);
      // Here we have the total row count
      $rows = $row[0];
      // This is your query again, it is for grabbing just one page worth of rows by applying $limit
      $sql = "SELECT * FROM myitems WHERE (user_id='$myuserid' AND itemCategory='bed') ORDER BY itemId ASC";
      $query = mysqli_query($this-&gt;_con, $sql);
      $list = '';
      $count = mysqli_num_rows($row);
  
      echo '&lt;div id="message" style="display:none"&gt;&lt;h1&gt;Saved!&lt;/h1&gt;&lt;/div&gt;';
  
      while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
  
          echo '
              &lt;div id="containment-wrapper"&gt;
                  &lt;div id="bed'.$row["itemId"].'" class="ui-widget-content draggable" data-left="20px" data-top="20px" style="position: absolute; left:20px; top:20px"&gt;'.$row["itemName"].'&lt;/div&gt;
              &lt;/div&gt;';
      }
  </code></pre>