Dragging elements in Snap.svg with Path element

Currently, I am attempting to drag a Path element using Snap.SVG and the drag method. Initially, the functionality seems to work fine without any parameters. However, when I try to add listeners, it fails to function properly. It appears that changing the position attributes x,y is not achievable.

start = () ->
    console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);


moveFunc =  (dx, dy, posx, posy) ->
    this.attr( { cx: posx , cy: posy } )


stop = () ->
    console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);

p.drag( moveFunc, start, stop)

The above code works with circle but not with the path element.

The following code allows for movement but loses the previous position on subsequent drags.

moveFunc =  (dx, dy, posx, posy) ->
        this.transform( "translate("+dx+", "+dy+")")

Therefore, it seems like the last method translates the element successfully, yet does not actually change its position.

javascriptsvgsnap.svg

Answer №1

To change the position of a path, you can use the following format:

this.transform('t' + dx + ',' + dy );

Keep in mind that this method does not retain the last position. To achieve that, you will need to save the transform data on mouse down event.

var move = function(dx,dy) {
        this.attr({
                    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                });
}

var start = function() {
        this.data('origTransform', this.transform().local );
}

Check out this example for reference.

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

RetrieveImageData magically produces a series of unexpected zeros

I'm currently developing a Chrome extension that has the capability to extract RGB values of images on web pages and store them into separate arrays. However, I'm encountering an issue where there are unexpected zeros appearing in the middle of e ...

javascriptimagehtml5-canvasgetimagedata

Troubleshooting module not being found with rekuire, requirish, or rfr in resolving relative require problem in nodejs

Looking to steer clear of the complicated relative path problem detailed here by opting for one of the suggested solutions. I've found three similar libraries that could help: rekuire node-rfr aka Require from Root requirish I've experimented ...

javascriptnpmbrowserify

Using Three.js to import and cast rays on a .obj model created in Blender

I have successfully imported a 3D terrain using Blender and the OBJLoader in Three.js. In addition, I have created a mesh (highlighted in yellow in the image below) that I want to follow the mouse cursor while it hovers over the terrain. I have attempted t ...

javascriptthree.js

How can I utilize customToJSON in Sails 1.0 within an Action2 function?

Currently, I am facing an issue with my user model that requires the implementation of a customToJSON method to remove the password field from the returned JSON object. Everything works fine when I include "responseType" in the "exits" with a value of "jso ...

javascriptnode.jsexpresssails.js

Searching for the way to access the values of a nested object's ref in Vue JS?

Within my Vue data object, I store a reference to a structure called Plot. It has properties for length, width, and acreage. interface Plot { length: number, width: number, acreage: number } const model = { plot: ref<Plot[]>([]), }) When fe ...

javascriptvue.jsvue-reactivity

Navigating through JQuery

Is there a way to scroll to a div + 100px specifically on the y axis? I am unsure how to achieve this. Can you provide guidance? I attempted using $.scrollTo('div100' + '100px', 2000) but unfortunately, it did not produce the desired ...

javascriptjquery

Can the keypress event be modified within the Google Chrome browser?

My code is functioning in IE but not in Chrome. I am having issues with the event not changing. Is there a different method for achieving this in Chrome, rather than assigning specific values to the charCode, keyCode, and which variables? You can view my ...

javascriptjquerygoogle-chrome-extension

Limit express to only allow AJAX requests

Currently working on an Express app where I aim to restrict access to the routes exclusively through AJAX requests. Aware that this involves using the X-Requested-With header, but uncertain of how to globally block other request types. Any suggestions or ...

javascriptnode.jsexpress

Implementing React and Material UI - Customizing Navigation Buttons/Links according to Routes

The following code snippet represents the main entry point of a React app, app.js, which includes the router endpoints. Below the app.js code, you will find the code for a Nav component, which serves as the navigation menu. I am looking to structure this ...

javascriptreactjsmaterial-ui

Ways to pause YouTube video when hiding a Div

Although I've asked a similar question previously, I am revisiting the issue as I have since taken a different approach. My previous attempts with the YouTube API were fruitless, so I am exploring new options. My goal is to create a website where var ...

javascripthtmlvideoiframeyoutube

Having trouble with a basic jQuery selector not functioning as expected

Having trouble parsing this HTML code: <tr id="a"> <td class="classA"> <span class="classB">Toronto</span> </td> <td class="classC"> <span class="classD">Winnipeg</span> </ ...

javascriptjqueryhtmljquery-selectors

Dynamic row addition in Material Design Lite table causes format to break

Here's the HTML markup for creating a checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span c ...

javascripthtmlcssvue.jsmaterial-design-lite

Tips for sending data to Jade templates:1. Use the `locals`

Review the code below user.js exports.index = function (req, res){ res.render('user', { id: req.params.id }); }; user.jade body - var x = #{id} div.container div.headpic if (x < 10) ...

javascriptnode.jsexpresspug

Expanding Headers with JavaScript

Looking to add a Stretchy Header Functionality similar to the one shown in this GIF: Currently, on iPhones WebView, my approach involves calling a Scope Function On Scroll (especially focusing on Rubberband Scrolling) and adjusting the Image Height with C ...

javascriptioscssangularjsionic-framework

Is there a way to find the JavaScript Window ID for my current window in order to utilize it with the select_window() function in

I'm currently attempting to choose a recently opened window while utilizing Selenium, and the select_window() method necessitates its WindowID. Although I have explored using the window's title as recommended by other sources, and enabled Seleni ...

javascriptselenium

How can I easily move from a shared page to a specific page in Angular 8?

Just stepping into the world of front-end development, I have a scenario where my menu page offers 3 options to navigate: Go to Arena. Go to Dungeon. Go to Battleground. However, clicking on any of these options leads me to a common page for character p ...

javascriptangularangular-ui-routerfrontend

Exploring the capabilities of AngularJS directives through ng-html2js testing

Many questions have been raised about the ng-html2js plugin, but unfortunately, none of the answers provided were able to solve my specific issue. I meticulously followed the official installation guide and also referenced the example available at https:/ ...

javascriptangularjsunit-testingng-html2js

What is the best way to transform a List<Pair<String, String>> to a List<String> using JavaScript?

Here is the data output structure: Map<String, List<Pair<String, String>>> "testdata": [ { "1.0": "True" }, { "1.1": "False" } ] ...

javascriptvue.js

Unlimited scrolling feature resembling Facebook and Tumblr created using jQuery

Below is the modified code from a tutorial found on hycus.com: <script type="text/javascript> var properlast = 10; $(window).scroll(function() { if($(window).scrollTop() == $(document).height() - $(window).height()) { $("div#load ...

javascriptjqueryajaxscroller

The Impact of Spaces in Inline Scripting within Asp.NET

As I was coding in JavaScript on an Asp.NET page today, I encountered a small issue. Here's what happened: <script type="type/javascript"> var elementID = document.getElementById("<%=txtMyServerControl.ClientID %>") </script> T ...

javascriptasp.net