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 jQuery , JavaScript Library. 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 la opción de tolerancia clasificable de jQuery UI que especifica qué modo se puede usar para probar si el elemento que se mueve se desplaza sobre otro elemento. Es de tipo string y su valor predeterminado es «intersecar».
Valores posibles para la opción Tolerancia:
- intersección: la clasificación comenzará cuando el elemento se superponga al otro elemento en al menos un 50%.
- puntero: la clasificación comenzará cuando el puntero del mouse se superponga al otro elemento.
Sintaxis:
Inicializando el ordenable con la opción de tolerancia que tiene el valor de string específico:
$( "Selector" ).sortable({ tolerance: "pointer" });
-
Configuración de la opción de tolerancia:
$( "Selector" ).sortable( "option", "tolerance", "pointer" );
-
Obtener la opción de tolerancia:
var tolerance = $( "Selector" ).sortable( "option", "tolerance" );
Enlace CDN: agregue los scripts de jQuery Mobile 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: El siguiente ejemplo ilustra la opción de tolerancia clasificable de jQuery UI donde estableceremos el valor de la opción de tolerancia como «puntero» y se activará el evento de inicio que muestra la opción de tolerancia actual.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" 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>
<title>jQuery UI Sortable tolerance option</title>
<style>
#sortableList {
list-style-type: none;
}
.geeks {
margin: 10px;
background: lightgreen;
padding: 10px;
border: 1px solid green;
font-size: 25px;
}
</style>
<script>
$(function() {
$('#sortableList').sortable({
start: function(event, ui) {
$("#sortedList").html($("#sortedList").html()
+ "Start event triggered when tolerance is "
+ $("#sortableList").sortable("option", "tolerance")
+ "<br>");
},
tolerance: "pointer"
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable tolerance option</h2>
<ul id="sortableList">
<li id="Tutorials" class="geeks">
1.Free Tutorials
</li>
<li id="Articles" class="geeks">
2.Millions of articles
</li>
<li id="Webinars" class="geeks">
3.Webinars by Industry Experts
</li>
<li id="Courses" class="geeks">
4.Live, Online and Classroom Courses
</li>
</ul>
<h2>
<span id='sortedList'></span>
</h2>
</center>
</body>
</html>
Producción:
Opción de tolerancia ordenable de jQuery UI
Referencia: https://api.jqueryui.com/sortable/#option-tolerance
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA