The snap drag position resets to its original placement when dragged for a second time

I am working on creating a unique slider that allows users to click and drag a circle along a curved path. The functionality is almost there, but whenever I drag the circle to a certain position, it snaps back to its original location.

var s=Snap('svg');
animateAlongPath = function (path, element) {
 var len = Snap.path.getTotalLength(path);
    var move = function(dx) {
        var movePoint=Snap.path.getPointAtLength(path, dx);
        this.attr({ cx: movePoint.x, cy: movePoint.y });
}


element.drag(move)
}  
var path=s.path('M10 200 q 120 -120 140 0 t 140 0').attr({
    fill:'none',
    stroke:'black'
});
var circle=s.circle(10,200,5);
animateAlongPath(path,circle)
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg width="500" height="500" ></svg>

Example image

jquerycsssvgsnap.svg

Answer №1

If you're wondering why the dragging isn't working as expected, it could be because you're using 'dx' instead of 'x' for the drag. Every time you drag, the 'dx' value (the difference from the start of the drag) gets reset.

Instead, in the move function, make sure to use the x parameter, like this:

var move = function( dx, dy, x, y ) {
    var movePoint = Snap.path.getPointAtLength(path, x);
    this.attr({ cx: movePoint.x, cy: movePoint.y });
}

Check out this jsfiddle for reference.

However, it seems like this approach may not always align perfectly. This could be because 'x' or 'dx' across a curved line doesn't translate accurately due to the line's curve. It might work better on a straight line.

If you're interested in exploring this further, I've answered a similar question on dragging along a line on SO question on dragging along line, where you can find the gradsearch function which might be useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

javascriptjquerycss

When it comes to implementing Ajax and Json in Ruby on Rails, the action url can sometimes be a

Apologies for any language issues. I am wondering about using "get" in JQuery when the url is an action reachable from the browser. In my js file: $.get('/user').success(function(data) { availableTags = data;} ); This is my controller: class U ...

jqueryruby-on-railsjsonrubyajax

Creating a text input that spans the full width of the form in a Bootstrap

I'm having trouble creating a text box that spans the entire width of my container. <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class= ...

htmlcsstwitter-bootstrap-3

The jQuery dropdown menu smoothly expands to reveal all hidden submenu options

I'm currently encountering an issue with jQuery. I am trying to create a responsive drop-down menu with sub-menus. The behavior I want is that if the window width is less than 700px, the submenus will trigger onClick. And if the window is wider than 7 ...

javascriptjqueryhtmlcssmenu

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

Extract specific index from a JSON array

I'm a beginner in Jquery and javascript, I am using ajax to upload an image and trying to fetch the image url. However, I keep encountering errors every time I try. Can someone assist me with this? Thank you! Here is the error message I received: Un ...

javascriptjqueryjson

Transform a JSON response into a list and showcase it in a jQuery-confirm popup

I'm currently working on a small script that utilizes an Ajax call to fetch data in JSON format. If the response isn't empty, I have it set up to display an alert containing the retrieved data. While this setup is functional, I'm intereste ...

jqueryjquery-confirm

Using Vivus.js in an Angular 5 Component

I am currently facing some challenges while attempting to incorporate Vivus.js library into Angular 5. The issue seems to be arising from the constructor of Vivus, which suggests that the library is being loaded correctly but not recognizing my element id. ...

angularsvgvivus

How can one go about incorporating the feature "updating list upon clicking a label" on a webpage?

On my website, I currently display a comprehensive list of publications. However, I am looking to organize these publications by various research topics using labels. Ideally, when clicking on a specific label, only the papers related to that topic will be ...

javascripthtmlcss

Rotate images every 5 seconds, pulling them directly from the server

I am looking to update the users every seven seconds on my website. To do this, I need to retrieve all user information from the server using JavaScript. What is the most efficient way to accomplish this task? My initial thought is to send an HTTP request ...

jquerypythonhtmldjango

Adjusting Bootstrap CSS Styles

After recently installing bootstrap 3.0 on my website and experimenting with it, I have a few questions. I am looking to customize certain aspects of the jumbotron (and other classes) in my personal .css file named "mycss.css". Here is the code I have add ...

htmlcsstwitter-bootstrap

What is the best way to add external javascript files to bookmarklets?

I have been developing a CDN for a collection of scripts that I created for my job. Previously, I had to distribute these scripts individually and each user would have to download and install them on their own computer. Now, I am transitioning them to an A ...

javascriptjquerycdnbookmarklet

Fade out all the other images using jQuery

I have created a jQuery code to fade images, but when I move the mouse over them all images fade simultaneously! $(".playThumb").fadeTo("normal", 1); $(".playThumb").hover(function() { $(".playThumb").each(function() { if ( $(this) != $(this) ...

javascriptjquerycss-selectors

Sending user input from search component to main App.js in React

I'm currently working on an app that searches a Movies database API. I have a main fetch function in App.js, and in tutorials, people are using a search bar within this main APP component. I'm wondering if it would be better to create a separate ...

javascripthtmlcssreactjsjson

When attempting to preflight cross domain Ajax requests with a custom header using jQuery, the requests are consistently being terminated

I've been attempting to execute a cross domain POST request with custom headers, but the preflight is consistently being cancelled. I'm uncertain whether it's the browser or jQuery causing this cancellation as indicated in Chrome's "Ins ...

jqueryajaxrestcors

Issue with jQuery Scroll functionality on mobile devices

Issue with jQuery Scroll on mobile devices Below is the code that I am using: $(document).scroll(function () { if ($(window).scrollTop() + $(window).height() >= $(document).height()) { alert("scrolled"); } }); Seeking assistance f ...

jquery

Fixing the height of the body padding with JS or JQuery for a

I have a rather straightforward question that pertains to an issue I am facing while building a website using BS4. Specifically, my problem revolves around a fixed-top navbar with the class "fixed-top". The challenge stems from not knowing the actual heig ...

javascriptjqueryhtmltwitter-bootstrap

Ways to achieve a darker background with rgba(0,0,0,0.5)

Hey there, if this isn't the right place to post my query, could someone guide me on where to do so? TL;DR = I need to darken the background of my showcase image! I'm working on a website as part of an online course project to practice new skil ...

htmlcss

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

Take action upon window.open

I have a code snippet here that opens a window. Is it possible to make an ajax call when this window is opened? window.open("http://www.google.com"); For instance, can I trigger the following ajax call once the window is open: var signalz = '1&apos ...

javascriptjquery