jQuery - Interazione trascinabile

Descrizione

Il Drag-able La funzione può essere utilizzata con le interazioni in JqueryUI. Questa funzione può abilitare la funzionalità trascinabile su qualsiasi elemento DOM. Possiamo trascinare l'elemento trascinabile facendo clic su di esso con il mouse.

Sintassi

Ecco la semplice sintassi per utilizzare il trascinamento:

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

Esempio

Di seguito è riportato un semplice esempio che mostra l'utilizzo del trascinamento:

<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>

Questo produrrà il seguente risultato:

jquery-interactions.htm