Legend: fix drag movement when editable: true

The legend container is now a `<g>` and position must be set using `translate`
instead of `x` and `y` coordinates. The cursor is set to always be `move`.

Author: mdtusz

src/components/legend/draw.js

@@ -321,38 +321,35 @@ module.exports = function draw(gd) {
     }
 
     if(gd._context.editable) {
-        var xf,
-            yf,
-            x0,
-            y0,
-            lw,
-            lh;
+        var xf, yf, x0, y0;
+
+        legend.classed('cursor-move', true);
 
         dragElement.init({
             element: legend.node(),
             prepFn: function() {
-                x0 = Number(legend.attr('x'));
-                y0 = Number(legend.attr('y'));
-                lw = Number(legend.attr('width'));
-                lh = Number(legend.attr('height'));
-                setCursor(legend);
+                // regex pattern for 'translate(123.45px, 543.21px)'
+                var re = /(.*\()(\d*\.?\d*)([^\d]*)(\d*\.?\d*)([^\d]*)/,
+                    transform = legend.attr('transform')
+                    .replace(re, function(match, p1, p2, p3, p4) {
+                        return [p2, p4].join(' ');
+                    })
+                    .split(' ');
+
+                x0 = +transform[0] || 0;
+                y0 = +transform[1] || 0;
             },
             moveFn: function(dx, dy) {
-                var gs = gd._fullLayout._size;
-
-                legend.call(Drawing.setPosition, x0+dx, y0+dy);
+                var newX = x0 + dx,
+                    newY = y0 + dy;
 
-                xf = dragElement.align(x0+dx, lw, gs.l, gs.l+gs.w,
-                    opts.xanchor);
-                yf = dragElement.align(y0+dy+lh, -lh, gs.t+gs.h, gs.t,
-                    opts.yanchor);
+                var transform = 'translate(' + newX + ', ' + newY + ')';
+                legend.attr('transform', transform);
 
-                var csr = dragElement.getCursor(xf, yf,
-                    opts.xanchor, opts.yanchor);
-                setCursor(legend, csr);
+                xf = dragElement.align(newX, 0, gs.l, gs.l+gs.w, opts.xanchor);
+                yf = dragElement.align(newY, 0, gs.t+gs.h, gs.t, opts.yanchor);
             },
             doneFn: function(dragged) {
-                setCursor(legend);
                 if(dragged && xf !== undefined && yf !== undefined) {
                     Plotly.relayout(gd, {'legend.x': xf, 'legend.y': yf});
                 }