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 distancia clasificable de jQuery UI que especifica que la clasificación no comenzará hasta que el mouse se arrastre más allá de esa distancia especificada. Se puede utilizar lo que permite hacer clic en los elementos dentro de la distancia aplicable. Es de tipo numérico y su valor por defecto es 1.
Sintaxis:
$( "Selector" ).sortable({ distance: 10 });
-
Configuración de la opción de distancia:
$( "Selector" ).sortable( "option", "distance", 10 );
-
Obtener la opción de distancia:
var distance = $( "Selector" ).sortable( "option", "distance" );
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 distancia ordenable de jQuery UI , donde estableceremos la opción de distancia en 10, y el evento de inicio se activará y mostrará la opción de distancia 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 distance 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 distance is "
+ $("#sortableList").sortable("option", "distance")
+ "<br>");
},
distance: 10
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable distance 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:
jQuery UI Opción de distancia ordenable
Referencia: https://api.jqueryui.com/sortable/#option-distance
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA