Raphael drag text around the screen and tspan dy

Question

here is my code for moving text around a canvas:

paper
    .text(self.x, self.y, "Jeaaaaaaaaaaaaaaah")
    .attr({
      fill: "#000",
      dy: 0,
      dx: 0,
      font: "italic 20px Helvetica"
    })
    .drag(
    function(dx, dy) {
      this.attr({x: self.x + dx, y: self.y + dy, dy:0, dx:0});
    },
    function () {
      this.attr({x: self.x, y: self.y, dy:0, dx:0});
    },
    function () {
      self.x = this.attr("x");
      self.y = this.attr("y");
    }
  );

It works in the sense that I can drag text around, but the first two times I drag it around it goes in completely wrong positions.

And this is given by this:

<text ....><tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" dy="120">Jeaaaaaaaaaaaaaaah</tspan></text>

After the first two dragdrops It becomes

<text ....><tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" dy="8.9734">Jeaaaaaaaaaaaaaaah</tspan></text>

And it is now draggable and it goes in the exact position. Someone knows how to avoid this?

please set up a live demo (e.g. at [jsFiddle](http://jsFiddle.net)) - it would be easier to help out. — Eliran Malka, Apr 10 '13 at 15:19

score 3 · Answer 1 · answered Apr 22 '13 at 21:21

3

I had a similar problem and ended up changing the dy property of tspan manually:

$('tspan').removeAttr('dy').attr('dy', 9);

of course it will change all tspan ty properties.

answered Apr 22 '13 at 21:21

beebee

280
3
18

Raphael drag text around the screen and tspan dy

1 Answers1