Drag Elements Along SVG Paths - jQuery Path Draggable Button

File Size: 5.04 KB
Views Total: 3662
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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"/>

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.


5. Set the direction to vertical.

  'direction': 'vertical'

6. Reverse the direction of the drag.

  'negative': true

7. Set the threshold in percent.

  'threshold': 0.99

8. The default path selector.

  '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('setValue', 0.5);



  • 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.