Arrastrar elementos html con jQuery UI + mini juego rompecabezas. – Free – Justicia – Money – Automovil

WIKI:jQuery UIes unabibliotecade componentes para elframeworkjQueryque le añaden un conjunto deplug-ins,widgetsy efectos visuales para la creación de aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery(find something, manipulate it: encuentra algo, manipúlalo).

Para arrastrar elementoshtml a través de nuestro navegador web usaremos la función.draggable() dejQuery UI, su sintaxis es:

$('elementoHTML').draggable();

$(' ') transforma nuestro elementohtml sea undiv, p, img button o cualquier otro en un objetojQuery, y la función.draggable() nos permitirá arrastrar éste elemento a través de nuestro navegador.

Si lo que deseamos es arrastrar una imagen a través de nuestro navegador, nuestro códigojQuery sería:

$(document).ready(function(){
    $('img').draggable();
});

En el siguiente ejemplo se encuentran cuatro partes de una imagen las cuales han sido recortadas previamente, la dinámica sería arrastrar éstas imágenes hasta formar la imagen original, algo así como un juego de rompecabezas (solo que de cuatro piezas).

!DOCTYPE html
html
    head
 style
 h2 {
    font-family:arial;
} 
 img{
 height: 200px;
 width: 200px;
}
 /style
     titleArrastrar elementos html/title
 script src="http://code.jquery.com/jquery-1.9.1.js"/script
    script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/script
 /head
 body
  h2Arrastra los cuadros hasta formar la imagen correcta del paisaje/h2
  img src="http://4.bp.blogspot.com/-sGy6-akW0oc/UfBOS6lxnbI/AAAAAAAAAUU/rHCro9FAScw/s1600/Paisaje-m+%C3%ADgico_swap_part1x2.jpg"/
  img src="http://4.bp.blogspot.com/-55iptsHA_ks/UfBOTNJFiQI/AAAAAAAAAUc/91-KQw4Y7ZU/s1600/Paisaje-m+%C3%ADgico_swap_part2x2.jpg"/
  img src="http://4.bp.blogspot.com/-d7ZnPl3lNG0/UfBOSpkr1QI/AAAAAAAAAUI/bH_NKfmLOmQ/s1600/Paisaje-m+%C3%ADgico_swap_part1x1.jpg"/
  img src="http://2.bp.blogspot.com/-syskVr92MJs/UfBOSjFz8FI/AAAAAAAAAUM/NvGGyYq6zHQ/s1600/Paisaje-m+%C3%ADgico_swap_part2x1.jpg"/
 script
$(document).ready(function(){
    $('img').draggable();
});
 /script
 /body
/html

Usamos la etiqueta HTMLimg para colocar la url de nuestras imágenes, y un poco deCSS para redimensionar sus tamaños(height: 200px,width: 200px). Además nuestro código jQuery previamente mencionado para que realice el efecto.

La imagen original es:

Vamos a ver nuestro mini rompecabezas en acción.

Agregar y eliminar clases en jQuery. – Miami – Abogado – Law Firm

Para agregar y eliminar clases enjQuery haremos uso de las funciones.addClass() y.removeClass(), su sintaxis sería de la siguiente manera:

$('elementohtml').addClass('NombreDeClase');
$('elementohtml').removeClass('NombreDeClase');

$('') convierte nuestro elemento html en un objetojQuery y las funciones.addClass() y.removeClass() agregan a éste elemento html la clase la cual coloquemos como parámetro o argumento.

Un ejemplo de como agregar una clase por ejemplo a un párrafo para cambiar su color de fuente sería:

$(document).ready(function(){
         $('p').addClass('azul');    
});

Ésto suponiendo que tenemos en nuestrocss una clase llamada.azul:

.azul { 
color: #0938F0; 
} 

Y si queremos cambiar la clase del párrafo al hacer clic en un botón haríamos lo siguiente:

-Para agregar el botón usaremos la etiqueta de htmlbutton , su sintaxis sería:

button type="button"Texto del boton/button

-Y nuestro botón sería:

button type="button"Agregar Clase/button

Nuestro código jQuery para cambiar la clase del párrafo haciendo clic en el botón "Agregar Clase" sería:

$(document).ready(function(){
    $('button').click(function(){
         $('p').addClass('azul');    
    });
});

Y para quitar una clase haciendo clic en un botón:

$(document).ready(function(){
    $('button').click(function(){
         $('p').removeClass('azul');    
    });
});

En el siguiente ejemplo agregamos una clase a un texto en undiv y lo transformamos en un cuadrado, y a un rectángulo le quitamos su clase y lo convertimos en un simple texto:

!DOCTYPE html
html
    head
 style
 h2 {
    font-family:arial;
}
 .rectangulo{
 display: inline-block;
 height:150px;
 width:400px;
 background-color:#BB17ED;
 font-family:arial;
 color:#ffffff;
 border-radius: 8px;
 text-align:center;
 margin-top:5px;
}
 .azul{
 display: inline-block;
 height:200px;
 width:200px;
 background-color:#0938F0;
 font-family:arial;
 color:#ffffff;
 border-radius: 8px;
 text-align:center;
 margin-top:5px;
}
 /style
     titleAgregar y eliminar clases jQuery/title
 script src="http://code.jquery.com/jquery-1.9.1.js"/script
 /head
 body
  h2Haz clic en los botones para eliminar y agregar las clases/h2
  button id="uno" type="button"Agregar Clase/button
  button id="dos" type="button"Quitar Clase/button
  /br
  div id="cuadrado"Soy un cuadro/div
  div Class="rectangulo"Soy un rectangulo/div    
 script
$(document).ready(function(){
    $('#uno').click(function(){
         $('#cuadrado').addClass('azul');    
    });
     $('#dos').click(function(){
         $('.rectangulo').removeClass('rectangulo');
    });
});
 /script
 /body
/html

Vamos a verlo en acción:

Eliminar elementos HTML haciendo clic con jQuery. – programmers – Donate – Auto

Para eliminar elementosHTMLcomo divs, párrafos, listas, imágenes entre otros, utilizaremos la funciónremove()dejQuery.

$('selector').remove();

Dondeselectores el elemento html que deseamos eliminar.

Ejemplo:

$('div').remove();

En el ejemplo anterior utilizamosla funciónremove()la cual eliminará el primer div que encuentre al cargar el documento,se debe saber de antemano que$()"es unafunción(un tipo de acción) que convierte lo que esté en medio de los paréntesis en un objeto dejQuery; es decir, algo con lo quejQuerypueda trabajar."¿Pero que sucede si quiero eliminarlo cuando haga clic sobre el?

Para ésto haremos uso del eventoclickdejQuery.

$('Selector').click(function(){

*acción*
    });

DondeSelectores el elemento html en el que se hará clic para que se realice la*acción*que queremos.

Ejemplo:

$('div').click(function(){
         $(this).remove();
    });

Al hacer clic en eldiveste mismo (this) se eliminará.

Entonces, si por ejemplo queremos hacer desaparecer o eliminar un div o cualquier elemento html al hacer clic en el sería algo como:

$(document).ready(function(){
    $('div').click(function(){
         $(this).remove();
    });
});

Utilizamos$(document).ready(function(){}); para tener listo el documento, luego elevento clickjunto a la funciónremove()para remover eldival hacer clic en el.

En el siguiente ejemplo hacemos desaparecer un botón utilizando la funciónremove()y elevento click():

!DOCTYPE html
html
    head
 style
 h2 {
    font-family:arial;
}

div{
 display: inline-block;
 height:20px;
 width:150px;
 background-color:#1280F7;
 font-family:arial;
 color:#ffffff;
 border-radius: 5px;
 text-align:center;
 margin-top:2px;
}
 /style
     titleBorrar boton/title
 script src="http://code.jquery.com/jquery-1.9.1.js"/script
 /head
 body
  h2Haz clic en el boton para eliminarlo/h2
  divSoy un boton/div
 script
$(document).ready(function(){
    $('div').click(function(){
         $(this).remove();
    });
});
 /script
 /body
/html

Vamos a verlo en acción: