new Gesture(namenon-null, distanceopt, directionsopt, variablenullable, contextnullable, storageopt, debugopt) → {string}
Componente contenedor que utiliza gestos de arrastre, para actualizar una variable segun la direccion en la que se arrastró el elemento
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
name |
string | El nombre o identificador del elemento |
||
distance |
string |
<optional> |
"5" | Distancia en pixeles en la que se producirá el evento |
directions |
string |
<optional> |
"lrtb" | Direcciones en las que se puede mover el div para generar gestos |
variable |
string |
<nullable> |
Nombre de la variable que se va a actualizar |
|
context |
string |
<nullable> |
Nombre del contexto que contiene la variable |
|
storage |
"true" | "false" |
<optional> |
"false" | Si es true el dato se guarda en el storage del explorador |
debug |
"true" | "false" |
<optional> |
"false" | Si es true se obtendra una salida en la consola del navegador cuando se produzca un evento |
- Source:
Returns:
[name]-[direction]-[guid]
- Type
- string
Example
<div style="width: 200px; display: flex; align-items: center; height: 200px; justify-content: center;">
<gesture name="id_item_1" variable="accion" context="test_gesture" debug="true" distance="25" directions="lr">
<div style="background-color: red; width: 30px; height: 30px; border-radius: 5px; margin: 5px"></div>
</gesture>
<gesture name="id_item_2" variable="accion" context="test_gesture" debug="true" distance="25" directions="tb">
<div style="background-color: blue; width: 30px; height: 30px; border-radius: 5px; margin: 5px"></div>
</gesture>
<gesture name="id_item_3" variable="accion" context="test_gesture" debug="true" distance="25">
<div style="background-color: green; width: 30px; height: 30px; border-radius: 5px; margin: 5px"></div>
</gesture>
<gesture name="id_item_4" variable="accion" context="test_gesture" debug="true" distance="25">
<div style="background-color: yellow; width: 30px; height: 30px; border-radius: 5px; margin: 5px"></div>
</gesture>
</div>