Drag Elements Along SVG Paths - jQuery Path Draggable Button

Drag Elements Along SVG Paths - jQuery Path Draggable Button
File Size: 5.04 KB
Views Total: 2505
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"/>
</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.