Saving HTML5 drag and drop elements to db

Question

I am trying to save HTML5 drap and drop divs to a database, there current state. this shows what I am trying to save

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.

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,

I have done research online and found that I may need jQuery which I don't have an understanding of.

In the image you can see I have dragged the data to a specific location on the page.

Below is the html5 source code. Could somebody please help?

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Create a new plan</title>

  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <?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");
  } 
  ?>
  
  <!-- this welcomes the session user and gives them the option to log out --> 
  <h3>Welcome, <?=$_SESSION['sess_user '];?>! <a href="logout.php">Logout</a></h3>

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

    
</script>
 
  </head> 
  <body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <a class="navbar-brand" href="#">DNP Seating Solutions</a>
 <ul class="nav navbar-nav navbar-right">
        <li><a href="LoggedOut.html">Log Out</a></li>
      </ul>
 </div>
  </div>
  </nav>
  <br>
 <!--<div id="col-sm-2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 <img id="student" src="student.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">-->
<br>

<div class= "col-md-3 well" style="float: left">
 <center><p>Students</p></center>
  <img id="OsamaSaeed" data-student-type="Osama Saeed" src="StudentImages/One.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="ThomasAli" data-student-type=" Thomas Ali" src="StudentImages/Two.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="AliMohammed" data-student-type="Ali Mohammed" src="StudentImages/Three.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="LaurenDent" data-student-type="Lauren Dent" src="StudentImages/Four.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="QuintonDial" data-student-type="Quntion Dial" src="StudentImages/Five.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="AdeebAli" data-student-type="Adeeb Ali" src="StudentImages/Six.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="BabsFab" data-student-type="Babs Fab" src="StudentImages/Seven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="ArtmanSummer" data-student-type="Artman Summer" src="StudentImages/Eight.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="BykowskiDerek" data-student-type="Bykowski Derek" src="StudentImages/Nine.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="AlisonRose" data-student-type="Alison Rose" src="StudentImages/Ten.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="GraySonny" data-student-type="Gray Sonny" src="StudentImages/Eleven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="GregersonLuke" data-student-type="Gregerson Luke" src="StudentImages/Twelve.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="AjayGriffin" data-student-type="Ajay Griffin" src="StudentImages/Thirteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="JohnsonJinny" data-student-type="Johnson Jinny" src="StudentImages/Fourteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="KazmirScoot" data-student-type="Kazmir Scoot" src="StudentImages/Fifteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="LattimoreCorey" data-student-type="Lattimore Corey" src="StudentImages/Sixteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="LeonLeon" data-student-type="Leon Leon" src="StudentImages/Seventeen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="MastersonSoph" data-student-type="Masterson Soph" src="StudentImages/Eighteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="MurieJenna" data-student-type="Mure Jenna" src="StudentImages/Nineteen.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="TomLawrence" data-student-type="Tom Lawrence" src="StudentImages/Twenty.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="TrouncAmanda" data-student-type="Trounc Amanda" src="StudentImages/Twentyone.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="LittleJohn" data-student-type="Little John" src="StudentImages/Twentytwo.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="FrancisStacey" data-student-type="Francis Stacey" src="StudentImages/Twentythree.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="DooliteSean" data-student-type="Doolite Sean" src="StudentImages/Twentyfour.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="DialQuinton" data-student-type="Dial Quinton" src="StudentImages/Twentyfive.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="DentLauren" data-student-type="Dent Lauren" src="StudentImages/Twentysix.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="CookeyPamela" data-student-type="Cookey Pamela" src="StudentImages/Twentyseven.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="CathNory" data-student-type="Cath Nory" src="StudentImages/Twentyeight.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="NorhAhmd" data-student-type="Norh Ahmd" src="StudentImages/Twentynine.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  <img id="OmarAli" data-student-type="Omar Ali" src="StudentImages/Thirty.jpg" draggable="true" ondragstart="drag(event)" width="120" height="20">
  </div>

<div class="container well" style="float: right; width: 70%;">

<div class="row">
    <div class="col-sm-2" id="S1" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">1</div>
    <div class="col-sm-2" id="S2" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">2</div>
    <div class="col-sm-2" id="S3" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">3</div>
 <div class="col-sm-2" id="S4" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">4</div>
    <div class="col-sm-2" id="S5" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">5</div>
  </div>
  </center>
  <br>
<div class="row">
    <div class="col-sm-2" id="S6" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">6</div>
    <div class="col-sm-2" id="S7" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">7</div>
    <div class="col-sm-2" id="S8" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">8</div>
 <div class="col-sm-2" id="S9" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">9</div>
    <div class="col-sm-2" id="S10" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">10</div>
  </div>
  <br>

<div class="row">
    <div class="col-sm-2" id="S11" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">11</div>
    <div class="col-sm-2" id="S12" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">12</div>
    <div class="col-sm-2" id="S13" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">13</div>
 <div class="col-sm-2" id="S14" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">14</div>
    <div class="col-sm-2" id="S15" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">15</div>
  </div>

  <br>
 
<div class="row">
    <div class="col-sm-2" id="S16" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">16</div>
    <div class="col-sm-2" id="S17" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">17</div>
    <div class="col-sm-2" id="S18" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">18</div>
 <div class="col-sm-2" id="S19" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">19</div>
    <div class="col-sm-2" id="S20" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">20</div>
  </div>

  <br>

<div class="row">
    <div class="col-sm-2" id="S21" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">21</div>
    <div class="col-sm-2" id="S22" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">22</div>
    <div class="col-sm-2" id="S23" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">23</div>
 <div class="col-sm-2" id="S24" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">24</div>
    <div class="col-sm-2" id="S25" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">25</div>
  </div>

  <br>

<div class="row">
    <div class="col-sm-2" id="S26" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">26</div>
    <div class="col-sm-2" id="S27" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">27</div>
    <div class="col-sm-2" id="S28" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">28</div>
 <div class="col-sm-2" id="S29" style="background-color:lavenderblush;" ondrop="drop(event)" ondragover="allowDrop(event)">29</div>
    <div class="col-sm-2" id="S30" style="background-color:lavender;" ondrop="drop(event)" ondragover="allowDrop(event)">30</div>
  </div>
  <br>
  <center>
    <form action="" method="POST">
  <input type="submit" class="btn btn-success" name="SavePlan" value="Save Plan"  />
  </form>
  </center>
</div>
  </body>
</html>

below is the code to connect to the database.

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

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,

<?php
include("config.php");
$array = $_POST['listnumber'];

if ($POST['update'] == "order") {

$x = 1;
foreach ($array as $key => $value) {
    $query = "UPDATE dragdrop SET listnumber = ". $x . "WHERE id = " .      $value;
    mysql_query($query) or die(mysql_error());
    $x ++;
    }
echo 'Saved';

} ?>

Hello, thank you for your question, i have a phpmyadmin database. — wlvali, Apr 24 '16 at 11:15
There are too many possible, complex answers. You must provide what you have tried and your ideas. Remember, we are here to help you learn. — Daniel Cheung, Apr 24 '16 at 13:10
You use phpMyAdmin to view and edit your database. Your actual database is MySQL - so I've added that as a tag to your question. — halfer, Apr 24 '16 at 14:20
I believe what you need are two things: (1) encode the state of your divs in the form. E.g., you can have an `` in the form for each image and set the value of the corresponding `` in your `drop()` handler, (2) save the values of the form to the database. — Mifeet, Apr 24 '16 at 15:04
As a general rule, don't ask people to click on external links in your question to see examples, etc. We are a cautious lot and don't like to do that. If you have an image to share put it in your question. — bitfiddler, Apr 24 '16 at 15:04
Additionally, if you don't know where to start with (1), read a book on JavaScript, if you don't know how to do (2), read a book on php. — Mifeet, Apr 24 '16 at 15:05
thank you for the tips and suggestions, i did try to insert the image in the question hoever i was unable to do this as i am quite new to stack overflow, sorry for providing the image link. i welcome you to edit the post if you are able to. — wlvali, Apr 24 '16 at 16:23

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

Welcome to StackOverflow. There are (at least) two things you will need to learn about to do this.

First is how to send the data to your server. A good way to do that is using AJAX with an HTTP POST. Here is a good Q&A from SO that should get you started. You can use something like this within your drop event to send the data to the server: Sending an HTTP Post using Javascript triggered event

The second is how to insert data to your mysql database from the PHP code. Your connect example is a bit out of date - you should use the mysqli interface for better security. Learn that instead by starting with this article from the PHP documentation: http://php.net/manual/en/mysqli.query.php

edited May 23 '17 at 12:08

Community

1
1

answered Apr 24 '16 at 14:47

bitfiddler

2,095
1
12
11

I don't think AJAX is necessary to achieve what @wlvali wants. – Mifeet Apr 24 '16 at 14:53
@Mifeet - Thanx. Your point is taken - POST is only one option to get the data back to the server. I've edited the answer to reflect that. If you have another idea that you think is simplier or otherwise better, please post it. – bitfiddler Apr 24 '16 at 15:01
My point was that a regular form submission is enough - see my comment under the question. – Mifeet Apr 24 '16 at 15:06
i have found a video on youtube, i was wondering if this would work in my case? https://www.youtube.com/watch?v=hevM07D8n8o – wlvali Apr 24 '16 at 16:42
will i able to get away with the code i have provided for the connection to the database? or will i have to use and learn mysqli, as this is a project i am undertaking. i wish i was able to avoid JavaScript – wlvali Apr 24 '16 at 16:47
The equivalent db connection code using mysqli is really a trivial difference, so I reccommend using that even though you could get away with what you have shown. @wlvali is correct that you can avoid the AJAX call by putting the data into your form since the submit is needed anyway. So that's less JavaScript. – bitfiddler Apr 24 '16 at 17:09
does it make mmore sense to put the form around each div since the images are going to be dragged into the divs? – wlvali Apr 26 '16 at 14:23
Yes. If you move the your entire "container well" div and all of it's children into the form and give each drop target a named input element, you will have access to them in the PHP script to which the form is submitted. You should set the `action` of the form to the PHP script URL. Add an `` to each of the target divs. In the drop code, set the value of that hidden input to the id of the dropped image. Then your PHP script can loop through the array and save the values. – bitfiddler Apr 26 '16 at 20:51

Saving HTML5 drag and drop elements to db

1 Answers1