La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El módulo Arrastrar y soltar se puede usar para hacer que cualquier elemento se pueda arrastrar y también permite que se suelten en una zona de colocación.
La opción de restricción se utiliza para restringir la dirección de movimiento del elemento arrastrable mientras se arrastra. Se puede configurar en ‘horizontal’ o ‘vertical’, lo que permite el movimiento solo en esa dirección.
Sintaxis:
{ constraint: value }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- valor: este es un valor de string que especifica la dirección restringida. Puede ser ‘horizontal’ o ‘vertical’. El valor predeterminado se establece en nulo.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script type="text/javascript">
window.onload = function () {
// Draggable element with
// constraint set to 'horizontal'
new Draggable('elem1',
{ constraint: 'horizontal' });
// Draggable element with
// constraint set to 'vertical'
new Draggable('elem2',
{ constraint: 'vertical' });
};
</script>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Drag &
Drop constraint Option
</strong>
<p>
Drag the elements to see the
effect of the constraint option.
Element 1 has the constraint set
to 'horizontal' and Element 2 has
the constraint set to 'vertical'.
</p>
<img id="elem1" src="elem1.png">
<img id="elem2" src="elem2.png">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA