Drag Elements Along SVG Paths - jQuery Path Draggable Button

Drag Elements Along SVG Paths - jQuery Path Draggable Button
File Size: 5.36 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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);

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