title: Saving HTML5 drag and drop elements to db
body: <p>I am trying to save HTML5 drap and drop divs to a database, there current state.
  <a href="http://i.stack.imgur.com/qcYeP.png" rel="nofollow">this shows what I am trying to save</a></p>
  
  <p>As you can see from the image, on the left hand side of the page is data that will be dragged into the grid which is what I am trying to save.</p>
  
  <p>Currently I am able to drag the items from the left to the centre of the page in specific locations however I don't know how to then save this data in the state it is in, I am using HTMl5 and have wrote a php page that connects to the database,</p>
  
  <p>I have done research online and found that I may need jQuery which I don't have an understanding of.</p>
  
  <p>In the image you can see I have dragged the data to a specific location on the page. </p>
  
  <p>Below is the html5 source code. Could somebody please help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Create a new plan&lt;/title&gt;
  
    &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
  
    &lt;?php // redirecting any web user who hasn't logged in so that the page cannot be accessed from the url
     session_start();
     
     if(!isset($_SESSION['sess_user '])) {
      header("location:login.php");
    } 
    ?&gt;
    
    &lt;!-- this welcomes the session user and gives them the option to log out --&gt; 
    &lt;h3&gt;Welcome, &lt;?=$_SESSION['sess_user '];?&gt;! &lt;a href="logout.php"&gt;Logout&lt;/a&gt;&lt;/h3&gt;
  
    &lt;script&gt;
  function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
   document.getElementById('StudentImageID ').innerHTML = ev.target.id;
   document.getElementById('StudentName ').innerHTML = ev.target.name;
  }
  
  function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
  }
  
      
  &lt;/script&gt;
   
    &lt;/head&gt; 
    &lt;body&gt;
   &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
  
        &lt;a class="navbar-brand" href="#"&gt;DNP Seating Solutions&lt;/a&gt;
   &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="LoggedOut.html"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
   &lt;/div&gt;
    &lt;/div&gt;
    &lt;/nav&gt;
    &lt;br&gt;
   &lt;!--&lt;div id="col-sm-2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
   &lt;img id="student" src="student.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100"&gt;--&gt;
  &lt;br&gt;
  
  &lt;div class= "col-md-3 well" style="float: left"&gt;
   &lt;center&gt;&lt;p&gt;Students&lt;/p&gt;&lt;/center&gt;
    &lt;img id="OsamaSaeed" data-student-type="Osama Saeed" src="StudentImages/One.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="ThomasAli" data-student-type=" Thomas Ali" src="StudentImages/Two.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="AliMohammed" data-student-type="Ali Mohammed" src="StudentImages/Three.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="LaurenDent" data-student-type="Lauren Dent" src="StudentImages/Four.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="QuintonDial" data-student-type="Quntion Dial" src="StudentImages/Five.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="AdeebAli" data-student-type="Adeeb Ali" src="StudentImages/Six.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="BabsFab" data-student-type="Babs Fab" src="StudentImages/Seven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="ArtmanSummer" data-student-type="Artman Summer" src="StudentImages/Eight.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="BykowskiDerek" data-student-type="Bykowski Derek" src="StudentImages/Nine.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="AlisonRose" data-student-type="Alison Rose" src="StudentImages/Ten.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="GraySonny" data-student-type="Gray Sonny" src="StudentImages/Eleven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="GregersonLuke" data-student-type="Gregerson Luke" src="StudentImages/Twelve.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="AjayGriffin" data-student-type="Ajay Griffin" src="StudentImages/Thirteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="JohnsonJinny" data-student-type="Johnson Jinny" src="StudentImages/Fourteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="KazmirScoot" data-student-type="Kazmir Scoot" src="StudentImages/Fifteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="LattimoreCorey" data-student-type="Lattimore Corey" src="StudentImages/Sixteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="LeonLeon" data-student-type="Leon Leon" src="StudentImages/Seventeen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="MastersonSoph" data-student-type="Masterson Soph" src="StudentImages/Eighteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="MurieJenna" data-student-type="Mure Jenna" src="StudentImages/Nineteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="TomLawrence" data-student-type="Tom Lawrence" src="StudentImages/Twenty.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="TrouncAmanda" data-student-type="Trounc Amanda" src="StudentImages/Twentyone.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="LittleJohn" data-student-type="Little John" src="StudentImages/Twentytwo.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="FrancisStacey" data-student-type="Francis Stacey" src="StudentImages/Twentythree.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="DooliteSean" data-student-type="Doolite Sean" src="StudentImages/Twentyfour.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="DialQuinton" data-student-type="Dial Quinton" src="StudentImages/Twentyfive.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="DentLauren" data-student-type="Dent Lauren" src="StudentImages/Twentysix.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="CookeyPamela" data-student-type="Cookey Pamela" src="StudentImages/Twentyseven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="CathNory" data-student-type="Cath Nory" src="StudentImages/Twentyeight.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="NorhAhmd" data-student-type="Norh Ahmd" src="StudentImages/Twentynine.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;img id="OmarAli" data-student-type="Omar Ali" src="StudentImages/Thirty.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20"&gt;
    &lt;/div&gt;
  
  &lt;div class="container well" style="float: right; width: 70%;"&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-2" id="S1" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;1&lt;/div&gt;
      &lt;div class="col-sm-2" id="S2" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;2&lt;/div&gt;
      &lt;div class="col-sm-2" id="S3" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;3&lt;/div&gt;
   &lt;div class="col-sm-2" id="S4" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;4&lt;/div&gt;
      &lt;div class="col-sm-2" id="S5" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;5&lt;/div&gt;
    &lt;/div&gt;
    &lt;/center&gt;
    &lt;br&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-2" id="S6" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;6&lt;/div&gt;
      &lt;div class="col-sm-2" id="S7" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;7&lt;/div&gt;
      &lt;div class="col-sm-2" id="S8" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;8&lt;/div&gt;
   &lt;div class="col-sm-2" id="S9" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;9&lt;/div&gt;
      &lt;div class="col-sm-2" id="S10" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;10&lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-2" id="S11" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;11&lt;/div&gt;
      &lt;div class="col-sm-2" id="S12" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;12&lt;/div&gt;
      &lt;div class="col-sm-2" id="S13" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;13&lt;/div&gt;
   &lt;div class="col-sm-2" id="S14" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;14&lt;/div&gt;
      &lt;div class="col-sm-2" id="S15" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;15&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br&gt;
   
  &lt;div class="row"&gt;
      &lt;div class="col-sm-2" id="S16" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;16&lt;/div&gt;
      &lt;div class="col-sm-2" id="S17" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;17&lt;/div&gt;
      &lt;div class="col-sm-2" id="S18" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;18&lt;/div&gt;
   &lt;div class="col-sm-2" id="S19" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;19&lt;/div&gt;
      &lt;div class="col-sm-2" id="S20" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;20&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-2" id="S21" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;21&lt;/div&gt;
      &lt;div class="col-sm-2" id="S22" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;22&lt;/div&gt;
      &lt;div class="col-sm-2" id="S23" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;23&lt;/div&gt;
   &lt;div class="col-sm-2" id="S24" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;24&lt;/div&gt;
      &lt;div class="col-sm-2" id="S25" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;25&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-2" id="S26" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;26&lt;/div&gt;
      &lt;div class="col-sm-2" id="S27" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;27&lt;/div&gt;
      &lt;div class="col-sm-2" id="S28" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;28&lt;/div&gt;
   &lt;div class="col-sm-2" id="S29" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;29&lt;/div&gt;
      &lt;div class="col-sm-2" id="S30" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;30&lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;center&gt;
      &lt;form action="" method="POST"&gt;
    &lt;input type="submit" class="btn btn-success" name="SavePlan" value="Save Plan"  /&gt;
    &lt;/form&gt;
    &lt;/center&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>below is the code to connect to the database.</p>
  
  <pre><code>&lt;?php 
  $connection=m ysql_connect( "mi-linux.wlv.ac.uk", "user", "password");
  if (!$connection) die( "Cannot connect to DataBase");
  // making a connection to the database mysql_select_db("db1500052", $connection) or die( "Can not find DB");
  ?&gt;
  </code></pre>
  
  <p>i have now managed to write a update.php page which will send the new position to the database, however still have not got around the jQuery and Ajax side of the html,</p>
  
  <pre><code>&lt;?php
  include("config.php");
  $array = $_POST['listnumber'];
  </code></pre>
  
  <p>if ($POST['update'] == "order") {</p>
  
  <pre><code>$x = 1;
  foreach ($array as $key =&gt; $value) {
      $query = "UPDATE dragdrop SET listnumber = ". $x . "WHERE id = " .      $value;
      mysql_query($query) or die(mysql_error());
      $x ++;
      }
  echo 'Saved';
  </code></pre>
  
  <p>}
  ?></p>