En este artículo, veremos los widgets que se pueden arrastrar, soltar, cambiar de tamaño y seleccionar en detalle con sus usos.
jQuery UI Draggable: el widget jQuery UI Draggable se utiliza para realizar operaciones de arrastre. Este widget permite mover elementos usando el mouse. Hay muchas opciones, métodos y eventos disponibles en este widget.
Ejemplo: en este ejemplo, usaremos la opción de opacidad arrastrable para cambiar la opacidad del elemento div mientras se arrastra.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
#div_element {
width: 150px;
height: 150px;
background: green;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Draggable opacity Option</h3>
<div id="div_element">Div content</div>
<script>
$(function () {
$("#div_element").draggable({
opacity: 0.4,
});
});
</script>
</body>
</html>
Producción:
jQuery UI Droppable: el widget jQuery UI Droppable se utiliza para realizar la operación de colocación. Este widget crea objetivos para elementos que se pueden arrastrar. Hay muchas opciones, métodos y eventos disponibles en este widget.
Ejemplo: En este ejemplo, utilizaremos la opción Droppable accept para controlar los elementos arrastrables que acepta el widget droppable.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
div {
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#div2 {
width: 150px;
height: 150px;
background: blue;
}
#div1 {
position: absolute;
left: 250px;
width: 200px;
height: 200px;
background: green;
color: #fff;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Droppable accept Option</h3>
<div id="div1">Drop here</div>
<div id="div2">Drag me</div>
<script>
$("#div2").draggable();
$("#div1").droppable({
accept: "#div1",
});
</script>
</body>
</html>
Producción:
jQuery UI redimensionable: el widget jQuery UI redimensionable se utiliza para realizar operaciones de cambio de tamaño. Este widget cambia el tamaño de un elemento usando el mouse. Hay muchas opciones, métodos y eventos disponibles en este widget.
Ejemplo: En este ejemplo, usaremos la opción de animación redimensionable para animar y cambiar el tamaño del cuadro al tamaño final después de cambiar el tamaño.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
#first_div {
width: 150px;
height: 150px;
background: green;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Resizable animate Option</h3>
<div id="first_div">First Div</div>
<script>
$(function () {
$("#first_div").resizable({
animate: true,
});
});
</script>
</body>
</html>
Producción:
jQuery UI seleccionable: el widget jQuery UI seleccionable se utiliza para realizar la selección de eventos. Este widget usa el mouse para seleccionar elementos individualmente o en un grupo. Hay muchas opciones, métodos y eventos disponibles en este widget.
Ejemplo: En este ejemplo, utilizaremos la opción de cancelación seleccionable para evitar que la selección comience en los elementos coincidentes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
h1 {
color: green;
}
#list .ui-selecting {
background: greenyellow;
}
#list .ui-selected {
background: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Selectable cancel Option</h3>
<ul id="list">
<li>Data Structure</li>
<li>Algorithm</li>
<li>C++</li>
<li>Java</li>
<li id="GFG1">HTML</li>
<li id="GFG2">Bootstrap</li>
<li>PHP</li>
</ul>
<script>
$("#list").selectable({
cancel: "#GFG1, #GFG2",
});
</script>
</body>
</html>
Producción:
