Get the id of SVG element that was being dragged

Question

I am using svg.js and dragg.js to move around a series of dynamically created objects (rects and circles etc). They are all in a group called nodes, I can get the positioning of the item being dragged but I am lost at trying to retrieve the

g id="dyanmicidIcreated"

I need this to identify which SVG object was moved?

nodes.mouseup(node => {
  console.log("x: "+node.clientX)
  console.log("y: "+node.clientY)
})

score 2 · Answer 1 · answered Jan 05 '19 at 18:17

2

You pass a handler to the function which is called with the event which was fired. So all information about the event is in the event object (which you for some reason called node).

nodes.mouseup((event) => {
    // mouse coordinates
    console.log(event.clientX, event.clientY)

    // the node which was clicked
    console.log(event.target)

    // the svgjs object
    console.log(SVG.adopt(event.target))

    // the id
    console.log(SVG.adopt(event.target).id())
})

If you dont use arrow functions, the function is called in the scope of the svgjs object. So you can just use this:

nodes.mouseup(function (event) {
    // `this` is same as node
    console.log(this)

    // id
    console.log(this.id())
})

In svg.js v3.0 you would use SVG(event.target) instead of SVG.adopt. Everything else stays the same

answered Jan 05 '19 at 18:17

Fuzzyma

7,619
6
28
60

Thank you so much - this gets the tspan id of the node I need the id of the group it belongs to see image - i get SvgjsTspan1056 which is 10x better than before but I need yqgn8zzzyvashpr66jny5 ...https://www.dropbox.com/s/m12c9anbk5t3c9q/Screenshot%202019-01-05%2019.26.23.png?dl=0 – adamprocter Jan 05 '19 at 19:26
Well what stops you from calling `graoupVar.id()`? Or `parent()`? – Fuzzyma Jan 05 '19 at 19:40
parent() I was not able to get the right thing.. here is the full code (might help) please excuse the mess - https://gitlab.adamprocter.co.uk/adamprocter/nodenoggin/blob/sharedlocations/src/components/user-interface.vue – adamprocter Jan 05 '19 at 19:43
Dude, `nodes.id()`. I am not sure what's so hard about that. – Fuzzyma Jan 05 '19 at 21:06
that just outputs the same ID for every drag not the one you dragged and is not the group ID i need unfortunately. for example with that every one I drag outputs console.log(nodes.id()) as SvgjsG1015 :( – adamprocter Jan 05 '19 at 21:38
Guess you need to output the correct vars then. If target is a tspan, try originalTarget or use the Dom traversing methods like parent and children to get where you want. This is all no magic. Your question is also not clear about where the event is bound and what contains what. – Fuzzyma Jan 05 '19 at 22:55
I just want to grab the ID of the group no matter which element you pick up – adamprocter Jan 06 '19 at 17:52
What is `nodes`? – Fuzzyma Jan 06 '19 at 21:39
nodes is a group of SVG objects being created from info in a couchDB – adamprocter Jan 15 '19 at 14:11

score 0 · Accepted Answer · answered Jan 15 '19 at 14:11

0

console.log(SVG.adopt(event.target.parentNode).id())

answered Jan 15 '19 at 14:11

adamprocter

856
1
15
31

Get the id of SVG element that was being dragged

2 Answers2