jQuery UI es una combinación de métodos y un conjunto de efectos de interfaz de usuario, widgets, interacciones y temas que se pueden proporcionar en la página web mediante métodos jQuery. Si desea crear una aplicación web potente que incluya varias funciones, como arrastrar, soltar, selector de fechas, información sobre herramientas, etc., entonces jQuery UI es una opción perfecta para crear estos efectos.
En este artículo, aprenderemos sobre varias interacciones de jQuery UI.
Este método permite arrastrar los elementos con la ayuda del mouse. Usando jQuery UI, podemos hacer que los elementos DOM ( D ocument O bject M odel ) se arrastren a cualquier lugar dentro del puerto de visualización. Esto se puede hacer haciendo clic en el objeto arrastrable con el mouse y arrastrándolo a cualquier lugar dentro del puerto de visualización.
Sintaxis:
el método draggable() tiene dos formas y el uso de cada forma depende del requisito. Estos son los siguientes:-
$(selector, context).draggable (options);
$(selector, context).draggable ("action", [params]);
La siguiente tabla muestra las diferentes opciones que se pueden utilizar con este método:
| OPCIÓN | OBJETIVO |
|---|---|
| agregarclase | Si el valor de esta opción se establece en falso, evitará que se arrastren los elementos DOM. El valor predeterminado de esta opción es verdadero. |
| eje | Esta opción se utiliza para restringir el movimiento del objeto que se puede arrastrar. Si el valor de esta opción se establece en Y , el objeto se puede arrastrar solo en dirección vertical y si el valor de esta opción se establece en X , el objeto se puede arrastrar solo en dirección horizontal. |
| contención | Esta opción también se usa para restringir el movimiento del objeto arrastrable dentro de la región específica o algún elemento. El valor predeterminado de esta opción es falso. |
| opacidad | Esta opción se utiliza para controlar la opacidad del objeto arrastrable mientras se arrastra. El valor predeterminado de esta opción es falso. |
Ejemplo:
En este ejemplo, el <div> con id=”d1″ se puede arrastrar a cualquier lugar dentro del puerto de vista, <div> con id=”d2″ se puede arrastrar a lo largo del eje X y <div> con id=”d3″ se puede arrastrar a lo largo del eje Y.
Código #1:
HTML
<!doctype html>
<html>
<head>
<title>jQuery UI Draggable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/
1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#d1 {
width: 120px;
height: 120px;
background-color :aqua;
padding:20px;
float:left;
margin:5px;
}
#d2 {
width: 120px;
height: 120px;
background-color :orange;
padding:20px;
float:left;
margin:5px;
}
#d3 {
width: 120px;
height: 120px;
background-color :yellow;
padding:20px;
float:left;
margin:5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<div id="d1">
<p>Drag Me Anywhere</p>
</div>
<div id="d2">
<p>Drag Me Horizontally</p>
</div>
<div id="d3">
<p>Drag Me Vertically</p>
</div>
<script type="text/javascript">
$( function() {
$("#d1").draggable();
} );
$( function() {
$("#d2").draggable({axis:"x"});
} );
$( function() {
$("#d3").draggable({axis :"y"});
} );
</script>
</body>
</html>
Producción:
Antes de arrastrar
Después de arrastrar
Este método permite soltar los elementos con la ayuda del ratón. Usando jQuery UI, podemos hacer que los elementos DOM ( D ocument O bject M odel ) caigan en cualquier lugar dentro del puerto de visualización en el objetivo especificado. Esto se puede hacer haciendo clic en el objeto que se puede arrastrar con el mouse y soltándolo en el objetivo especificado.
Sintaxis:
El método droppable() tiene dos formas y el uso de cada forma depende del requisito. Estos son los siguientes:-
$(selector, context).droppable (options)
$(selector, context).droppable ("action", params)
La siguiente tabla muestra las diferentes opciones que se pueden utilizar con este método:
| OPCIÓN | OBJETIVO |
|---|---|
| aceptar | El valor de esta opción especifica qué objetos que se pueden arrastrar se pueden soltar en el destino especificado. El valor predeterminado de esta opción es *. |
| agregarclase | Si el valor de esta opción se establece en falso, evitará que se eliminen los elementos DOM. El valor predeterminado de esta opción es verdadero. |
| deshabilitar | Esta opción también se usa para deshabilitar la propiedad droppable del elemento DOM. Si el valor de esta opción se establece en true, entonces el objeto no se puede descartar y si el valor de esta opción se establece en false, entonces el objeto se puede descartar en el objetivo especificado. |
Ejemplo:
En este ejemplo, el <div> con id=”drag” se arrastra y se suelta sobre el <div> con id=”drop”.
Código #1:
HTML
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/
themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#drag
{
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color :aqua;
padding:10px;
}
#drop
{
width: 150px;
height: 150px;
float: left;
margin: 10px;
background-color:yellow;
padding:10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$( function() {
$( "#drag" ).draggable();
$( "#drop" ).droppable(
{
drop :function()
{
alert("I am dropped");
}
} );
} );
</script>
</head>
<body>
<center>
<h1 align="center">Welcome to GeeksforGeeks</h1>
<div id="drag">
<p>Drag Me</p>
</div>
<div id="drop">
<p>Drop On Me</p>
</div>
</center>
</body>
</html>
Producción:
antes de caer
después de caer
Código n.º 2:
en este ejemplo, el <div> con id=”drag” se arrastra y se suelta sobre el <div> con id=”drop” y no se puede colocar sobre el <div> con id=”non-drop ”.
HTML
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/
themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#drag
{
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color :aqua;
padding:10px;
}
#non-drop
{
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color :orange;
padding:10px;
}
#drop
{
width: 150px;
height: 150px;
float: left;
margin: 10px;
background-color:yellow;
padding:10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$( function() {
$( "#drag" ).draggable();
$( "#non-drop" ).draggable();
$( "#drop" ).droppable(
{
accept:"#drag",
drop :function()
{
alert("I am dropped");
}
} );
} );
</script>
</head>
<body>
<center>
<h1 align="center">Welcome to GeeksforGeeks</h1>
<div id="drag">
<p>Drag Me</p>
</div>
<div id="non-drop">
<p>Non droppable</p>
</div>
<div id="drop">
<p>Drop On Me</p>
</div>
</center>
</body>
</html>
Producción:
antes de caer
después de caer
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por AniketSingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA