Сохранение элементов перетаскивания HTML5 в db

-1

Я пытаюсь сохранить драфт и падение div в HTML5, там текущее состояние. this shows what I am trying to save Сохранение элементов перетаскивания HTML5 в db

Как видно из изображения, в левой части страницы находятся данные, которые будут перетаскиваться в сетку, которую я пытаюсь сохранить.

В настоящее время я могу перетаскивать элементы слева в центр страницы в определенных местах, но я не знаю, как сохранить эти данные в состоянии, в котором он находится, я использую HTMl5 и написал php-страница, которая подключается к базе данных,

Я провел исследование в Интернете и обнаружил, что мне может понадобиться jQuery, о котором я не понимаю.

На изображении, которое вы видите, я перетащил данные в определенное место на странице.

Ниже приведен исходный код html5. Может ли кто-нибудь помочь?

<!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 
 
\t \t \t session_start(); 
 
\t \t \t 
 
\t \t \t if(!isset($_SESSION['sess_user '])) { 
 
\t \t \t \t header("location:login.php"); 
 
\t \t } \t 
 
\t \t ?> 
 
\t \t 
 
\t \t <!-- this welcomes the session user and gives them the option to log out --> 
 
\t \t <h3>Welcome, <?=$_SESSION['sess_user '];?>! <a href="logout.php">Logout</a></h3> 
 

 
\t <script> 
 
function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
\t document.getElementById('StudentImageID ').innerHTML = ev.target.id; 
 
\t document.getElementById('StudentName ').innerHTML = ev.target.name; 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
} 
 

 
\t \t \t \t 
 
</script> 
 
\t 
 
    </head> 
 
    <body> 
 
\t <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> 
 
\t <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="LoggedOut.html">Log Out</a></li> 
 
     </ul> 
 
\t </div> 
 
    </div> 
 
    </nav> 
 
    <br> 
 
\t <!--<div id="col-sm-2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
\t <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"> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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>

ниже код для подключения к базе данных.

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

я теперь успел написать update.php страницу, которая будет посылать новую позицию в базе данных, однако до сих пор не удосужился стороне JQuery и Ajax в HTML,

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

если ($ POST [ 'обновление'] == "порядка") {

$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';

} ?>

источник

2016-04-22 wlvali

у вас есть база данных для сохранения? как mysql? –

Здравствуйте, спасибо за ваш вопрос, у меня есть база данных phpmyadmin. – wlvali

Слишком много возможных, сложных ответов. Вы должны предоставить то, что вы пробовали, и ваши идеи. Помните, мы здесь, чтобы помочь вам учиться. –

Мы до StackOverflow. Есть (по крайней мере) две вещи, которые вам нужно будет узнать об этом.

Прежде всего, как отправить данные на ваш сервер. Хороший способ сделать это - использовать AJAX с HTTP POST. Вот хороший Q & A от SO, который должен вас начать. Вы можете использовать что-то подобное в своем событии drop, чтобы отправить данные на сервер: Sending an HTTP Post using Javascript triggered event

Во-вторых, как вставить данные в базу данных mysql из кода PHP. Пример вашего подключения немного устарел - вы должны использовать интерфейс mysqli для лучшей безопасности. Узнайте, что вместо этого, начиная с этой статьи из документации PHP: http://php.net/manual/en/mysqli.query.php

источник

2016-04-24 14:47:40 bitfiddler

Я не думаю, что AJAX необходимо для достижения того, что хочет @wlvali. – Mifeet

@ Mifeet - Thanx. Ваша точка взята - POST - это только один вариант, чтобы вернуть данные на сервер. Я отредактировал ответ, чтобы это отразить. Если у вас есть другая идея, которую вы считаете более простой или лучше, отправьте ее. – bitfiddler

Моя точка зрения заключалась в том, что регулярного представления формы достаточно - см. Мой комментарий по вопросу. – Mifeet

Сохранение элементов перетаскивания HTML5 в db

ответ

Смежные вопросы