La interfaz de usuario de jQuery consta de widgets de GUI, efectos visuales y temas implementados mediante jQuery , CSS y HTML . jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El método jQuery UI draggable disabled() se usa para deshabilitar la propiedad arrastrable del elemento HTML div . Este método no acepta ningún parámetro.
Sintaxis:
$( ".selector" ).draggable( "disable" );
Parámetros: Este método no acepta ningún parámetro.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”stylesheet”>
<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: El siguiente ejemplo ilustra el método Draggable disabled() en jQuery UI.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.12.1/themes/smoothness/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>
h1 {
color: green;
}
.container{
width: 320px;
}
#left-div {
float: left;
}
#right-div{
float: right;
}
#left-div,#right-div
{
width: 150px;
height: 150px;
text-align: center;
border: 2px solid black;
}
</style>
<script>
$(function() {
$( "#left-div" ).draggable();
$( "#left-div" ).draggable('enable');
$( "#right-div" ).draggable();
$( "#right-div" ).draggable('disable');
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Draggable disabled() Method</h3>
<div class="container">
<div id="left-div">
<h3 class="gfg">I'm Enable</h3>
</div>
<div id="right-div">
<h3 class="gfg">I'm Disable</h3>
</div>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA