svg.js svg.draggable.js and manipulation of appearance

Question

I want to use svg.js in to implement drag and drop, and manipulate appearance of graphical elements. It mainly works, but I do not fully understand why.

I have extracted the essential part from my app to illustrate the situation my app. It is possible to play around there and see the effects.

https://jsfiddle.net/bwl21/ex8dcxtm/12/

The SVG is generated as a string by my application. I simulate this by adding the SVG to the HTML pane in jsfiddle.

I have a function "set_draggable(id) which gets the id of the svg element and attaches a drag handler.

function set_draggable(svg_element) {

  var xx = SVG.get(svg_element);
  xx.addClass("zn_draggable");

  xx.draggable(function(x, y) {
    return {
      x:  Math.floor(x),
      y:  Math.floor(y)
    }
  });

  var sx = 0,
    sy = 0;
  xx.on('dragstart', function(e) {
    sx = e.detail.p.x;
    sy = e.detail.p.y;
    this.fill("red");
  });

  // todo: don't know why 'this' is the only way to change the filling ...
  xx.on('dragend', function(e) {
    this.fill("green");
    var result = {
      delta: [ e.detail.p.x - sx, e.detail.p.y - sy],
      element: svg_element
    };
    alert(JSON.stringify(result));
  })
}


set_draggable("ZN_18");
set_draggable("ZN_19");
set_draggable("ZN_20");
set_draggable("ZN_21");

My questions:

in the draggable event handlers, I want to change the colors of the object. Why does 'this' refer to the dragged object? It is the only way I found to apply fill() with an effect. I tried with xx which is the dom node I attach the draggable. Also tried with e.target.fill("red").
When dragging the Fermata - Character (which is a path), the color does not change. It works when dragging text. What could be the reason?

Answer by bwl21: Meanwhile I found that the attributes of the group do not override attributes of the children. So I had to remove stroke and fill from the path.

Neverheless, I did not manage to navigate to the children and change the attributes there.
When dragging ZN_19 it can move only vertical as I made the draggable. If I wrap it in a group (like ZN_20) and call draggable() on this, I can move it around as I wish.
Is there a better way to get the delta as result of drag? I store x and y in the 'dragstart' handler, and compute the delta in the 'dragend' handler. I wourd expect the delta to be integer number as I round it by the function passed to the draggable().
If I have many objects (my app has about 300), will I face a performance issues, as I create many handlers? Is there a better way to do this.

Any help is welcome.

svg.js svg.draggable.js and manipulation of appearance

1 Answers