jQuery - Interaction Drop-grado

Descrizione

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

Sintassi

Ecco la semplice sintassi per utilizzare il trascinamento:

$( "#droppable" ).droppable();

Esempio

Di seguito è riportato un semplice esempio che mostra l'utilizzo di drop-grado:

<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();
				
            $( "#droppable" ).droppable({
               drop: function( event, ui ) {
                  $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
               }
            });
         });
		 
      </script>
		
      <style>
         #draggable { width: 100px; height: 100px; 
            padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
         #droppable { width: 150px; height: 150px; 
            padding: 0.5em; float: left; margin: 10px; }
      </style>
   </head>
	
   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p>Drag</p>
      </div>

 
      <div id = "droppable" class = "ui-widget-header">
         <p style = "background-color: aquamarine;height: 50;">Drop here</p>
      </div>
	 
   </body>
</html>

Questo produrrà il seguente risultato:

jquery-interactions.htm