jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas características se pueden implementar utilizando la biblioteca jQuery JavaScript .
jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para las páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
En este artículo, usaremos el método jQuery UI Draggable instance() para recuperar el objeto de la instancia que se puede arrastrar. Si el elemento no tiene ninguna instancia asociada, se devuelve «indefinido». No acepta ningún parámetro para su funcionamiento.
Sintaxis:
var Instance = $( ".selector" ).draggable( "instance" );
Parámetro: Este método no acepta ningún parámetro.
Tipo de retorno: este método devuelve un valor de objeto que contiene el objeto de instancia del arrastrable.
Enlace CDN: agregue los siguientes scripts de jQuery Mobile que serán necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<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>
Ejemplo: Este ejemplo demuestra el método jQuery UI Draggable instance() .
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>
.drag {
width: 90px;
height: 40px;
border: 1px solid black;
background-color: blue;
}
.drop2,
.drop3 {
width: 200px;
height: 40px;
border: 1px solid black;
float: center;
background-color: green;
}
#btn {
padding: 0.5;
font-size: 25px;
height: 40px;
width: 150px;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var insta = $(".drop2").draggable("instance");
console.log(insta);
});
$(".drag").draggable();
$(".drop2").droppable();
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Draggable instance() method</h3>
<div class="drag">
<p>Drag</p>
</div>
<br>
<div class="drop2">
<p>Drop here</p>
</div>
<br>
<input type="button" id="btn" value="Instance">
<h4><span id="spanID"></span></h4>
</center>
</body>
</html>
Producción:
jQuery UI Arrastrable instancia() método
Referencia: https://api.jqueryui.com/draggable/#method-instance
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA