Drag and Drop jQuery con PHP y MySQL | Codedrinks

1 de 13

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

2 de 13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

-- ------------------------------------------------------ Tabla: tblalumno

-- ----------------------------------------------------CREATE TABLE IF NOT EXISTS `tblalumno` (
`idalumno` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
`paterno` VARCHAR(15) NOT NULL ,
`materno` VARCHAR(15) NOT NULL ,
`nombre` VARCHAR(15) NOT NULL ,
PRIMARY KEY (`idalumno`) )
ENGINE = InnoDB;
-- ------------------------------------------------------ Tabla: tblidioma
-- ----------------------------------------------------CREATE TABLE IF NOT EXISTS `tblidioma` (
`ididioma` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
`idioma` VARCHAR(15) NOT NULL ,
PRIMARY KEY (`ididioma`) )
ENGINE = InnoDB;
-- ------------------------------------------------------ Tabla: alumnoidiomas
-- ----------------------------------------------------CREATE TABLE IF NOT EXISTS `alumnoidiomas` (
`idalumno` INT UNSIGNED NOT NULL ,
`ididioma` INT UNSIGNED NOT NULL ,
PRIMARY KEY (`idalumno`, `ididioma`) ,
INDEX `fk_alumnoidiomas_tblAlumno_idx` (`idalumno`
CONSTRAINT `fk_alumnoidiomas_tblAlumno`
FOREIGN KEY (`idalumno` )
REFERENCES `tblalumno` (`idalumno` )
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `fk_alumnoidiomas_tblidioma1`
FOREIGN KEY (`idalumno` )
REFERENCES `tblidioma` (`ididioma` )
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

3 de 13

1
2
3
4
5
6
7
8
9
10
11
12
13

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

<div id="informacion">
<form id="frmAlumno"><label for="paterno">Paterno</
<input id="paterno" type="text" name="paterno"
<label for="materno">Materno</label>
<input id="materno" type="text" name="materno"
<label for="nombre">Nombre</label>
<input id="nombre" type="text" name="nombre"
<label>Selecciona los idiomas que el alumno domina</
<ul id="idiomasseleccionados"></ul>
<ul id="idiomas"></ul>
<input type="submit" name="enviar" value="Enviar"
</form>
</div>

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

4 de 13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

1
2
3

1
2
3

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

#informacion{
width:500px;
margin: 0 auto;
}
form{
width:47s8px;
border:1px solid #ddd;
padding:10px;
float:left;
}
form label{
width:100%;
float:left;
margin: 5px 0;
}
form input{
float:left;
margin: 5px 0;
}
ul{
width:200px;
float:left;
border:1px solid #ddd;
margin:5px;
padding:10px;
list-style-type: none;
}
li{
margin:5px 0;
background:#ddd;
cursor:move;
padding:5px;
list-style-type: none;
}

<?php
<require_once('cargaridiomas.php');
?>

<ul id="idiomas">
<?php echo cargaridiomas(); ?>
</ul>

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

5 de 13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1
2

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

<?php
function cargaridiomas(){
//Conexion a la base de datos
$conexion = new mysqli('servidor','usuario','contrasea'
//Consulta SQL a ejecutar para obtener los idiomas
$consulta = "SELECT * FROM tblidioma";
//Se ejecuta la consulta
$result = $conexion->query($consulta);
$respuesta = "";
//Si se obtuvo algun registro se recorre el resultado
if($result->num_rows > 0){
// Ciclo para crear la cadena con la lista de idiomas que va a
while($fila = $result->fetch_array()){
// A cada idioma se le asigna el atributo id, lo vamos a u
$respuesta .= '<li id="'.$fila['ididioma'].'">'
}
}
// Se regresa la cadena de respuesta
return $respuesta;
}
?>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqu

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqu

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

6 de 13

1
2
3
4
5

1
2
3
4
5
6
7
8
9

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

Codedrinks

$(document).ready(function(){
Me gusta
$( "#idiomas li, #idiomasseleccionados li" ).draggable({
appendTo: "body",
A 606 personas les gusta Codedrinks.
helper: 'clone',
});

$( "#idiomasseleccionados, #idiomas" ).droppable({

accept:'li',
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
ui.draggable.appendTo(this).fadeIn();
}
});

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

7 de 13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

$("#frmAlumno").submit(function(){
//Funcion para obtener los valores del formulario se explica mas a
datos = obtenerDatos();
$.ajax({
url:'guardarAlumno.php', //URL del archivo php que procesa la
type:'post', // Los datos se envan mediante el mtodo POST
dataType:'json', // La respuesta se obtiene como JSON
data:datos // Los datos del formulario
}).done(function(respuesta){
//Condicin para verificar si se guardaron o no los datos
if( respuesta.estado == true )
alert("La informacin se guard correctamente"
else
alert("Ocurri un error al guardar la informacin, por fav
});
return false; // Se regresa false para el que submit no se ejecute
});

function obtenerDatos(){
//Se crea la variable para la lista de idiomas seleccionados
var idiomas ="";
//Se obtiene todos los elementos li de la lista con id="idiomassel
// utilizando el mtodo .each
$( "#idiomasseleccionados li" ).each(function (i) {
// Se agrega a la variable idiomas el valor del atributo id y
// para separar cada idioma
idiomas += $(this).attr('id')+",";
});
// Se almacenan todos los datos en un arreglo
datos = [{name:"accion",value:"guardar"},{name:"paterno"
// Se regresa la variable datos con toda la informacion del alumno
return datos;
}

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

8 de 13

1
2
3
4
5
6
7
8
9
10
11
12

1
2

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

<?php
if( isset($_POST['accion']) ){
// Variables con la informacion del alumno
$accion = $_POST['accion'];
$paterno = $_POST['paterno'];
$materno = $_POST['materno'];
$nombre = $_POST['nombre'];
$idiomas = $_POST['idiomas'];
//Se crea la respuesta del servidor
$respuesta = new stdClass();
// Se realiza la conexion con la base de datos
$conexion = new mysqli('servidor','usuario','password'

$conexion->autocommit(FALSE);
$consulta = "INSERT INTO tblalumno (paterno, materno, nombre) VALUES('$

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

9 de 13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1
2
3
4
5

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

if( $conexion->query($consulta) ){
//Se obtiene el id del alumno que se insert
$idalumno = $conexion->insert_id;
// Se elimina la ultima coma de la cadena
$idiomas = trim($idiomas,',');
// Se dividen los valores de la cadena en un arreglo
$idiomas = explode(',', $idiomas);
// Se recorre el arreglo de idiomas
foreach ($idiomas as $idioma) {
$consulta = "INSERT INTO alumnoidiomas (idalumno, ididioma) VA
// Se ejecuta cada consulta para guardar los idiomas
if( $conexion->query($consulta) == FALSE ){
// Se ejecuta este codigo si alguna consulta no se ejecut
$respuesta->estado = FALSE;
$conexion->rollback();
echo json_encode($respuesta);
die();
}
}
}
else{
// Este codigo se ejecuta si la primer consula fall
$respuesta->estado = FALSE;
$conexion->rollback();
echo json_encode($respuesta);
die();
}

$respuesta->estado = TRUE;
$conexion->commit();
echo json_encode($respuesta);
}
?>

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

10 de 13

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

11 de 13

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

if(respuesta.estado == true)

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

<a href="" title=""> <abbr title="">

<acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime="">
<em> <i> <q cite=""> <strike> <strong>

12 de 13

23/03/2015 9:37

Drag and Drop jQuery con PHP y MySQL | Codedrinks

13 de 13

http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

23/03/2015 9:37