Making paths and images draggable in Raphael js

Question

Is it possible to be able to drag and drop objects other than just circles and rectangles around a page using Raphael js?

I want to add in paths and images which you can

Answer 1

Try this for non-circles. Circles attributes are different than images, text, etc, I think.

    var start = function () {
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.animate({r: 70, opacity: .25}, 500, ">");
    },
    move = function (dx, dy) {
        this.attr({x: this.ox + dx, y: this.oy + dy});
    },
    up = function () {
        this.animate({r: 50, opacity: .5}, 500, ">");
    };

Answer 2

I would recommend you raphael.draggable library, that makes the trick for you. I used it with a map application that allows the user to use zoom over the map and then drag it.

I had a problem with this library in IE8 because in the function events refering to mousedown, mousemove, etc. IE drops an exception, telling the user that event is null. You can solve it by replacing the event by e and adding e = e || event in the raphael.draggable.js script. This fix doesn't affect other browsers.

So, the method mousemove in the startDragger is:

function startDragger() {
  document.onmousemove = function(e) {
    e = e || event
    if (paper.draggable.current()) {
      var transX = e.clientX - lastDragX;
      var transY = e.clientY - lastDragY;

      paper.draggable.current().translate(transX, transY);
      lastDragX = e.clientX;
      lastDragY = e.clientY;
    }
  };
}

And the link: https://github.com/mephraim/raphael.draggable

Hope this could help you.

Answer 3

I experimented with this a little while ago, and got it working using the following approach:

• Add an initially hidden, styled, absolutely positioned div with a transparent background and suitable border styling to your page, and using jQuery/UI make it draggable.
• Add a click event to each of the Rapahel/SVG elements you wish to be draggable, and in this event add code to resize and reposition the div over the element which has just been clicked and then make it visible.
• Add code to the div which updates the position of the Raphael element when it is dragged.

I extended this to add resizing capabilities, and this also worked well, but going forward it would be great to see drag, drop and resize capabilities (ideally properly integrated into the library rather than using jQuery) built into Raphael, as these features would open up a whole bunch of possibilities for in-browser designers using pure Raphael.

Answer 4

In case anyone is still looking for a solution, here's a plugin that scales, rotates and drags all shapes including paths.

https://github.com/ElbertF/Raphael.FreeTransform

Answer 5

As translate is being deprecated in Raphael, I've modified Nathan's answer to work with transform:

var paper = Raphael(10, 50, 320, 200);

var tri = paper.path("M0 0L0 20L25 10L0 0Z").attr("fill", "#ff0");

var start = function () {
  this.lastdx ? this.odx += this.lastdx : this.odx = 0;
  this.lastdy ? this.ody += this.lastdy : this.ody = 0;
  this.animate({"fill-opacity": 0.2}, 500);
},
move = function (dx, dy) {
  this.transform("T"+(dx+this.odx)+","+(dy+this.ody));
  this.lastdx = dx;
  this.lastdy = dy;
},
up = function () {
  this.animate({"fill-opacity": 1}, 500);
};

tri.drag(move, start, up);

I'm relatively new to Raphael and came up with this through trial and error, so someone out there might have an explanation of why it works or a cleaner way of doing it ;)

Answer 6

it's not that hard if you understand the usual dragging functions Chris Butler gave you. I use this:

var start = function () {
  //storing original coordinates
  this.xSource = this.attrs.path[0][1];
  this.ySource = this.attrs.path[0][2];
  this.xDest = this.attrs.path[1][1];
  this.yDest = this.attrs.path[1][2];
  this.attr({opacity: 0.5});
  },
  move = function (dx, dy) {
  //move will be called with dx and dy
  var xS = this.xSource+dx;
  var xD = this.xDest+dx;
  var yS = this.ySource+dy;
  var yD = this.yDest+dy;
  this.attr({path: "M"+ xS +" "+ yS +"L"+ xD +" "+yD});
  },
  drag = function(){
  this.node.drag(this.move,this.start,this.up);
  };

You can also know which sort of figure you're dragging in the functions with this.type, so that you can make these functions work for all sort of figures.