jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante jQuery , CSS y HTML . jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web.
En este artículo, vamos a comprender el evento de inicio de jQuery UI Draggable . Podemos arrastrar cualquier elemento HTML por toda la página.
Sintaxis:
$( ".selector" ).draggable({
start: function( event, ui ) {}
});
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” 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>
Ejemplo 1: En este ejemplo, un cuadro está configurado para que se pueda arrastrar. Estamos usando un evento de inicio de devolución de llamada , definiremos una función que cambia el color del texto y el fondo.
HTML
<!doctype html>
<html>
<head>
<title>jQuery UI Draggable start event</title>
<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>
#draggable_box {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Draggable start event</h3>
<div id="draggable_box">Drag this box.</div>
<script>
$("#draggable_box").draggable({
start: function (event, ui) {
$(this).css("background-color", "green");
$(this).css("color", "white")
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2: Podemos establecer varias acciones en el elemento. En este ejemplo, animaremos el cuadro usando el evento de inicio .
HTML
<!doctype html>
<html>
<head>
<title>jQuery UI Draggable start event</title>
<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>
#draggable_box {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Draggable start event</h3>
<div id="draggable_box">Drag this box.</div>
<script>
$("#draggable_box").draggable({
start: function (event, ui) {
$(this).animate({
width: "200px",
height: "200px",
backgroundColor: "green",
}, "slow");
}
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/draggable/#event-start