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