jQuery - Interaction sélectionnable

La description

le Select ableCette fonction peut être utilisée avec des interactions dans JqueryUI. Cette fonction peut être activée pour sélectionner des fonctionnalités sur n'importe quel élément DOM. Dessinez une boîte avec votre curseur pour sélectionner des éléments. Maintenez la touche Ctrl enfoncée pour effectuer plusieurs sélections non adjacentes.

Syntaxe

Voici la syntaxe simple pour utiliser le glisser-déposer -

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

Exemple

Voici un exemple simple montrant l'utilisation 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>

Cela produira le résultat suivant -

jquery-interactions.htm