jQuery - Interaction triable

La description

le Sort ableCette fonction peut être utilisée avec des interactions dans JqueryUI.Cette fonction peut être activée fonctionnalité triable sur n'importe quel élément DOM.Cliquez sur et faites glisser un élément vers un nouvel emplacement dans la liste, et les autres éléments s'ajusteront pour s'adapter. Par défaut, les éléments triables partagent des propriétés déplaçables.

Syntaxe

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

$(function() {
   $( "#sortable" ).sortable();
   $( "#sortable" ).disableSelection();
});

Exemple

Voici un exemple simple montrant l'utilisation de sort able -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Sortable - 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>
         #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
         #sortable li { margin: 0 3px 3px 3px; padding: 0.4em;
            padding-left: 1.5em; font-size: 1.4em; height: 18px; }
         #sortable li span { position: absolute; margin-left: -1.3em; }
      </style>
		
      <script>
         $(function() {
            $( "#sortable" ).sortable();
            $( "#sortable" ).disableSelection();
         });
      </script>
   </head>
	
   <body>
 
      <ul id = "sortable">
         <li class = "ui-state-default"><span 
            class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
         <li class = "ui-state-default"><span 
            class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
         <li class = "ui-state-default"><span 
            class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
         <li class = "ui-state-default"><span 
            class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
         <li class = "ui-state-default"><span 
            class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
         <li class = "ui-state-default"><span 
            class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
         <li class = "ui-state-default"><span 
            class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
      </ul>

   </body>
</html>

Cela produira le résultat suivant -

jquery-interactions.htm