path-draggable-button
This jQuery plugin from LGND allows the user to drag a "button" (we typically use an image) along an SVG path, triggering an interaction when it reaches the end of the path.
Settings
| Option | Type | Default | Description |
|---|---|---|---|
| pathSelector | string | "path" | CSS selector for the SVG path to follow |
| direction | string | "horizontal" | Predominant direction of the path, either "horizontal" or "vertical" |
| negative | boolean | false | Whether the path is "reversed", e.g. bottom to top or right to left |
| threshold | float | 0.99 | Percentage (0.0-1.0) of the path the button needs to be dragged before triggering the handler |
Events
| Event | Arguments | Description |
|---|---|---|
| change | event, button, value | When the button is dragged and changes position |
| finish | event, button | When the button is dragged beyond the threshold percentage |
Methods
Methods are called through the pathDraggableButton method, e.g.:
// Get percentage (0-1.0) dragged var distance = $(".toggle-switch").pathDraggableButton('getValue'); // Set to 50% completed $(".toggle-switch").pathDraggableButton('setValue', 0.5);| Method | Argument | Description |
|---|---|---|
getValue | Returns the percentage (0-1.0) dragged | |
setValue | value : float | Sets the completion percentage (0-1.0) and moves the button along the path |
Example
Create a draggable button that fades out after completion:
$(element).pathDraggableButton({ direction: 'horizontal' }).on('finish', function(){ $(this).fadeOut(); });For more examples, see https://lgndhq.github.io/path-draggable-button
Dependencies
jQuery 1.8
