Drag and Drop JQuery Con PHP y MySQL - Codedrinks

Drag and Drop jQuery con PHP y MySQL | Codedrinks http://www.codedrinks.com/ejemplo-de-drag-and-drop-jquery-con-php...

1 de 13 23/03/2015 9:37

123456789

101112131415161718192021222324252627282930313233343536373839

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


2 de 13 23/03/2015 9:37

123456789

10111213

Paterno

123456789

101112131415161718192021222324252627282930313233343536373839

#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;}

123

123


4 de 13 23/03/2015 9:37

123456789

1011121314151617181920212223

12345

$(document).ready(function(){ $( "#idiomas li, #idiomasseleccionados li" ).draggable({ appendTo: "body", helper: 'clone', });

123456789

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

Codedrinks

A 606 personas les gusta Codedrinks.

Me gustaMe gusta


6 de 13 23/03/2015 9:37

123456789

1011121314151617

$("#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});

123456789

101112131415

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


7 de 13 23/03/2015 9:37

123456789

101112

123456789

10111213141516171819202122232425262728

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

12345

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


9 de 13 23/03/2015 9:37


10 de 13 23/03/2015 9:37

if(respuesta.estado == true)


11 de 13 23/03/2015 9:37


12 de 13 23/03/2015 9:37


13 de 13 23/03/2015 9:37

Drag and Drop JQuery Con PHP y MySQL - Codedrinks

Documents

Transcript of Drag and Drop JQuery Con PHP y MySQL - Codedrinks