jQuery: interacción arrastrable

Descripción

los Drag-able La función se puede usar con interacciones en JqueryUI. Esta función puede habilitar la funcionalidad de arrastrar en cualquier elemento DOM. Podemos arrastrar el elemento arrastrable haciendo clic en él con el mouse.

Sintaxis

Aquí está la sintaxis simple para usar arrastrable:

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

Ejemplo

A continuación, se muestra un ejemplo simple que muestra el uso de arrastrar:

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

Esto producirá el siguiente resultado:

jquery-actions.htm

↰ Previous page