Making paths and images draggable in Raphael js

前端 未结 7 451
夕颜
夕颜 2021-01-31 10:45

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

7条回答
  •  离开以前
    2021-01-31 11:36

    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 ;)

提交回复
热议问题