Cambio dati php con drag and drop

[Simodome91]

Buonasera a tutti,

Vi scrivo perchè ho una grande confusione riguardo all'interazione della funzione di trascinamento con il database.

Per farla (spero) semplice provo a descrivere meglio ciò che voglio fare:

Scenario:

- 2 div(drop1, drop2) con posizione fissa tramite CSS
- 1 div(drag) trascinabile dentro ai div (drop1, drop2)

In teoria ciò che vorrei fare è che al trascinamento del div(drag) dentro uno dei 2 div(drop1, drop2) si possa cambiare un record nel database che assuma l'id del div in cui è stato trascinato.

Spero di essermi spiegato; di seguito posto il codice:



<?php


include "connessione.php";


if (!$result = $connessione->query("SELECT * FROM ded"))
{
echo "Errore della query:" . $connessione->error . ".";
exit();
}
else
{
if($result->num_rows >=0)
{
echo "<div class= 'drop' id= 'p1' ondrop='rilascia(event)' ondragover='rilasciaImg(event)'>";
echo "<div id= 'drag' draggable= 'true' ondragstart= 'trascina(event)'></div>";
echo "</div>";
echo "<div class= 'drop' id= 'p2' ondrop='rilascia(event)' ondragover='rilasciaImg(event)'></div>";
}
$result->close();
}

$connessione->close();
?>



<style>


.drop{
background-color: rgba(0,0,0,0.6);
margin: 0;
padding: 0;
position: absolute;
width: 110px;
height: 100px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}


#p1{
top: 20px;
left: 20px;
}


#p2{
top: 20px;
left: 200px;
}

#drag {
background-color: rgba(0,0,0,0.6);
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}


</style>



<script>

function trascina(x) {
x.dataTransfer.setData("text", x.target.id);
}
function rilascia(x) {
x.preventDefault();
var data = x.dataTransfer.getData("text");
x.target.appendChild(document.getElementById(data) );
}
function rilasciaImg(x) {
x.preventDefault();
}

</script>



Il codice riportato funziona ma non so come (dove, quando, perchè, T_T) inserire la variazione del record nel database.

Grazie per l'attenzione

[badaze]

Php è un linguaggio lato server. L'HTML e JavaScript sono lato client (browser) e comunicano con il server con $_GET o $_POST. L'aggiornamento dei dati tramite mysql avviene sul server, per aggiornare i dati senza submit ti occorre ajax con jquery ad esempio.

[Simodome91]

Php è un linguaggio lato server. L'HTML e JavaScript sono lato client (browser) e comunicano con il server con $_GET o $_POST. L'aggiornamento dei dati tramite mysql avviene sul server, per aggiornare i dati senza submit ti occorre ajax con jquery ad esempio.

Per cominciare ti ringrazio di avermi risposto; prima di continuare la discussione allora mi vado a vedere jquery allora.

Ancora grazie.

[Simodome91]

Buonasera a tutti;

Dopo aver studiato un po di jquery e ajax sono riuscito a dare un bel calcio alle mie variabili create con jquery e mandarle su php.

Ho solo da risolvere 1 problema inerente al drag and drop con jquery: lasciare in primo piano il div "draggable".

Ho impostato nel css lo z-index dei div drop a "1" e del div drag a "2" ma non è servito.

Determinato nel mio obiettivo ho provato a impostare lo z-index pure sullo script jquery ma senza ottenere alcun risultato (provando anche ad usare il metodo stack di cui non ho capito molto e mi farebbe piacere avere dei chiarimenti).

Vi posto il codice:

$(document).ready(function() {
$(".drag").draggable({
stack: "true",
zindex: "2",
revert: "invalid"
});

$(".drop").droppable ({
drop: handleDropEvent,
});

});


Ringrazio chiunque abbia la pazienza di aiutarmi.

PS: una volta finito posterò il codice completo cosi che possa essere utile a chiunque ne abbia bisogno.

[badaze]

Prova questi. Aggiorna la tabella dopo il drop. Il nome del database è testi7.Devi trascinare gli elementi da P1 a P quello che vuoi e vice versa.

Dimenticavo. Funziona con Firefox non con IE.

File : test9023.php

<?php 
$connexion = new mysqli("localhost","root","", "testi7"); 
$query     = "select id, value, level from tabella1 order by id";
$result    = mysqli_query($connexion,$query);
$array     = array();
while (list($id,$value,$level) = mysqli_fetch_array($result)) {
 $array[$level][] = array($id,$value,$level);
}
function lista($level,$array) {
 reset($array);
 if (isset($array[$level])) {
  foreach ($array[$level] as $key => $value) {
   list($id,$value,$level) = $value;?>
    <div id="id_<?php print $id;?>" draggable= 'true'  ondragstart= 'drag(event)'><?php print $value;?></div><?php
  }
 }
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
 .drop1{
 background-color:yellow;
 }
 .drop2{
 background-color:green;
 }

-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
 var dragFrom = null;
 function allowDrop(ev){
         ev.preventDefault();
 }    
 
 function drag(ev){
         ev.dataTransfer.setData("text", ev.target.id);
 }    
 
 function drop(anObject,ev){
         ev.preventDefault();
     var data = ev.dataTransfer.getData("text");        
     //if (anObject.id != ev.target.id) {
       anObject.appendChild(document.getElementById(data));
      // Ajax
      $.ajax({
             url  : 'test9023b.php',
             type : 'POST',
             data : 'id=' + document.getElementById(data).id + '&level=' + document.getElementById(data).parentNode.id, 
       dataType : 'html'
           }) ;
     //}
 }
//-->
</script>
</head>
<body>
<table summary="">
<tr style="border:1px solid black">
  <td width="150">P1</td><td width="150">P2</td><td width="150">P3</td><td width="150">P4</td>
</tr>
<tr style="border:1px solid black">
<td width="150" class= 'drop1' id= 'p1' ondrop='drop(this,event)' ondragover='allowDrop(event)' >
  <?php lista(1,$array);?>
</td>
<td width="150" class= 'drop2' id= 'p2' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <?php lista(2,$array);?> 
</td>

<td width="150" class= 'drop1' id= 'p3' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <?php lista(3,$array);?>
</td>
<td width="150" class= 'drop2' id= 'p4' ondrop='drop(this,event)' ondragover='allowDrop(event)'>
  <?php lista(4,$array);?> 
</td>
</tr>
</table>
<div id="log"></div>
</body>
</html>

File : test9023b.php

<?php 
$connexion = new mysqli("localhost","root","", "testi7"); 
$id        = $_POST['id'];
$id        = str_replace('id_','',$id);
$level     = str_replace('p','',$_POST['level']);
$query     = "update tabella1 set level=$level where id='$id'";
mysqli_query($connexion,$query);
echo "ok";
 ?>

Tabella SQL :

-- phpMyAdmin SQL Dump

-- version 4.5.5.1

-- http://www.phpmyadmin.net

--

-- Client :  127.0.0.1

-- Généré le :  Dim 09 Octobre 2016 Ã　 22:22

-- Version du serveur :  5.7.11

-- Version de PHP :  7.0.4

　

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

　

　

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

　

--

-- Base de données :  `testi7`

--

　

-- --------------------------------------------------------

　

--

-- Structure de la table `tabella1`

--

　

CREATE TABLE `tabella1` (

  `id` bigint(20) NOT NULL,

  `value` varchar(35) NOT NULL,

  `level` int(11) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

　

--

-- Contenu de la table `tabella1`

--

　

INSERT INTO `tabella1` (`id`, `value`, `level`) VALUES

(1, 'A100', 1),

(2, 'A101', 1),

(3, 'A102', 1),

(4, 'A103', 1),

(5, 'A104', 1),

(6, 'A105', 1),

(7, 'A106', 1),

(8, 'A107', 1),

(9, 'A108', 1),

(10, 'A109', 1),

(11, 'A110', 1),

(12, 'A111', 1);

　

--

-- Index pour les tables exportées

--

　

--

-- Index pour la table `tabella1`

--

ALTER TABLE `tabella1`

  ADD PRIMARY KEY (`id`);

　

--

-- AUTO_INCREMENT pour les tables exportées

--

　

--

-- AUTO_INCREMENT pour la table `tabella1`

--

ALTER TABLE `tabella1`

  MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;