jQuery - Interacción seleccionable

Descripción

los Select ableLa función se puede usar con interacciones en JqueryUI. Esta función se puede habilitar la funcionalidad seleccionable en cualquier elemento DOM. Dibuje un cuadro con el cursor para seleccionar elementos. Mantenga presionada la tecla Ctrl para realizar múltiples selecciones no adyacentes.

Sintaxis

Aquí está la sintaxis simple para usar arrastrable:

$( "#selectable" ).selectable();

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso de select able -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable - Default functionality</title>
  
      <link rel = "stylesheet" 
         href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>

      <style>
         #feedback { font-size: 1.4em; }
         #selectable .ui-selecting { background: #FECA40; }
         #selectable .ui-selected { background: #F39814; color: white; }
         #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
         #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
      </style>
		
      <script>
         $(function() {
            $( "#selectable" ).selectable();
         });
      </script>
   </head>

   <body>
 
      <ol id = "selectable">
         <li class = "ui-widget-content">Item 1</li>
         <li class = "ui-widget-content">Item 2</li>
         <li class = "ui-widget-content">Item 3</li>
         <li class = "ui-widget-content">Item 4</li>
         <li class = "ui-widget-content">Item 5</li>
         <li class = "ui-widget-content">Item 6</li>
         <li class = "ui-widget-content">Item 7</li>
      </ol>
 
   </body>
</html>

Esto producirá el siguiente resultado:

jquery-actions.htm

↰ Previous page