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 destroy() se usa para eliminar completamente la funcionalidad arrastrable.
Sintaxis:
$( ".selector" ).draggable( "destroy" );
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 destroy() 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('destroy'); }); </script> </head> <body> <center> <h1>GeeksforGeeks</h1> <h3>jQuery UI Draggable destroy() 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 Destroy</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