jQuery UI es una tecnología basada en la web y consta de widgets de GUI, efectos visuales y temas implementados mediante 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 Sortable disabled() para deshabilitar la clasificación.
Sintaxis:
$( ".selector" ).sortable( "disable" );
Parámetro: Este método no acepta ningún parámetro.
Tipo de devolución: este método devuelve un valor de objeto.
Enlace CDN: a continuación se encuentran los enlaces CDN de jQuery UI 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 describe los usos del método de jQuery UI Sortable disabled().
HTML
<!DOCTYPE html>
<html lang="en">
<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>
<style>
#sortable {
list-style-type: none;
width: 50%;
}
#sortable li {
margin: 10px 0;
padding: 0.5em;
font-size: 25px;
height: 20px;
background-color: lightgreen;
}
#btn {
margin-left: 50px;
padding: 0.5;
font-size: 25px;
height: 80px;
width: 50%;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
$("#sortable").sortable("disable");
});
});
$(function () {
$("#sortable").sortable();
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable disable() Method</h4>
<ul id="sortable">
<li class="ui-state-default">Geeks1</li>
<li class="ui-state-default">Geeks2</li>
<li class="ui-state-default">Geeks3</li>
<li class="ui-state-default">Geeks4</li>
<li class="ui-state-default">Geeks5</li>
</ul>
<div class="res"></div>
<input type="button" id="btn" value="Disable">
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/sortable/#method-disable
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA