jQuery - Interaction glissante

La description

le Drag-able Cette fonction peut être utilisée avec des interactions dans JqueryUI. Cette fonction peut activer la fonctionnalité glissante sur n'importe quel élément DOM. Nous pouvons faire glisser l'élément glissant en cliquant dessus avec la souris.

Syntaxe

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

$( "#draggable" ).draggable();

Exemple

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

<html>
   <head>
      <title>The jQuery Example</title>
      <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>
		
      <script type = "text/javascript" language = "javascript">
   
         $(function() {
            $( "#draggable" ).draggable();
         });
		 
      </script>
		
      <style>
         #draggable { width: 150px; height: 150px; padding: 0.5em; }
         .back{
            background-color: lightgrey;
            width: 50px;
            padding: 25px;
            border: 25px solid navy;
            margin: 25px;
         }
      </style>
   </head>
	
   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p class = "back">Drag</p>
      </div>
	 
   </body>
</html>

Cela produira le résultat suivant -

jquery-interactions.htm