jQuery UI es una tecnología basada en la web y consta de widgets de GUI, efectos visuales y temas implementados mediante jQuery ,Biblioteca de 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, aprenderemos a usar la opción RefreshPositions de jQuery UI Draggable. Esta opción se usa para calcular todas las posiciones desplegables en cada movimiento del mouse. El valor predeterminado de esta opción es falso .
Sintaxis:
La opción refreshPositions toma un valor booleano y la sintaxis es la siguiente.
$( ".selector" ).draggable({ refreshPositions: true });
-
Obtener la opción refreshPositions
var refreshPositions = $( ".selector" ) .draggable( "option", "refreshPositions" );
-
Establecer la opción refreshPositions
$( ".selector" ).draggable( "option", "refreshPositions", true );
Enlace CDN: Se necesitarán los siguientes scripts de jQuery Mobile para su proyecto, por lo que debemos agregar estos scripts a su proyecto.
<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
<script src = «https://code. jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Ejemplo: Este ejemplo describe los usos de jQuery UI Draggable refreshPositions Option.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.dragg {
width: 100px;
height: 50px;
border: 1px solid black;
background-color: blue;
}
.dropp2{
width: 250px;
height: 50px;
border: 1px solid black;
float: center;
background-color: green;
}
#btn
{
padding: 0.5;
font-size: 20px;
height: 40px;
width: 40%;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var refreshPositions = $(".dragg")
.draggable( "option", "refreshPositions" );
document.getElementById('gfg').innerHTML +=
"RefreshPositions Value : " + refreshPositions;
});
});
$(function () {
$(".dragg").draggable();
$(".dragg").draggable({
refreshPositions: true
});
$(".dropp2").droppable({
drop: function (event, ui) {
$(this)
.find("p")
.html("Dropped!");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery UI Draggable refreshPositions Option</h3>
<div class="dragg">
<p>Drag</p>
</div>
<br>
<div class="dropp2">
<p>Drop here</p>
</div>
<br>
<input type="button" id="btn"
value="Get refreshPositions">
<h3><span id="gfg"></span></h3>
</center>
</body>
</html>
Producción:
jQuery UI Opción de actualización de posiciones arrastrable
Referencia: https://api.jqueryui.com/draggable/#option-refreshPositions
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA