Drag Elements Along SVG Paths - jQuery Path Draggable Button

Path Draggable Button is a jQuery plugin which allows an element to be dragged along an SVG path you specify. Supports both horizontal and vertical drag. 

How to use it:

1. Include the main JavaScript path-draggable-button.js after jQuery and we're ready to go.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/path-draggable-button.js"></script>

2. Create an SVG path on the page.

<svg width="189" height="63" xmlns="http://www.w3.org/2000/svg">
  <path d="M187.965.885C119.322 38.945 57 59.315 1 62" stroke="#55C1FF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-dasharray="7 7"/>
</svg>

3. Create a draggable element with the CSS class of toggle-button.

<span class="toggle-button"></span>

4. Initialize the plugin on the SVG path and done.

$(function(){
  $(".drag-path").pathDraggableButton();
});

5. Set the direction to vertical.

$(".drag-path").pathDraggableButton({
  'direction': 'vertical'
});

6. Reverse the direction of the drag.

$(".drag-path").pathDraggableButton({
  'negative': true
});

7. Set the threshold in percent.

$(".drag-path").pathDraggableButton({
  'threshold': 0.99
});

8. The default path selector.

$(".drag-path").pathDraggableButton({
  'pathSelector': 'path'
});

9. Execute a function on drag end.

$(".drag-path").pathDraggableButton().on('finish', function(event, button){
  // do something
});

10. Execute a function on move.

$(".drag-path").pathDraggableButton().on('change', function(event, button, value){
  // do something
});

11. Set & get the percentage.

$(".drag-path").pathDraggableButton('getValue');
$(".drag-path").pathDraggableButton('setValue', 0.5);

Changelog:

2020-05-06

• Add support for negative (bottom to top) vertical sliders

---

This awesome jQuery plugin is developed by lgndhq. For more Advanced Usages, please check the demo page or visit the official website.