JSFiddle - React, Tailwind, and code Playground

JavaScript

// 1. Create methods to set and retrieve the group of an element :

    Raphael.el.setGroup = function (group) {
      this.group = group;
    };
    Raphael.el.getGroup = function () {
      return this.group;
    };

// 2. Create the method of your grouped elements :

    Raphael.fn.superRect = function (x, y, w, h, text) {
      var background = this.rect(x, y, w, h).attr({
        fill: "#FFF",
        stroke: "#000",
        "stroke-width": 1
      });
      var label = this.text(x+w/2,y+h/2, text);
      var layer = this.rect(x, y, w, h).attr({
        fill: "#FFF",
        "fill-opacity": 0,
        "stroke-opacity": 0,
        cursor: "move"
      });
      var group = this.set();
      group.push(background, label, layer);
      layer.setGroup(group);
      return layer;
    };

// 3. create functions to drag a grouped elements :

    var dragger = function () {
      this.group = this.getGroup();
      this.previousDx = 0;
      this.previousDy = 0;
    },
    move = function (dx, dy) {
      var txGroup = dx-this.previousDx;
      var tyGroup = dy-this.previousDy;

      this.group.translate(txGroup,tyGroup);

      this.previousDx = dx;
      this.previousDy = dy;
    },
    up = function () {};

// 4. Init SVG paper and create your elements (the order of element is important)::


      var paper = Raphael(0, 0,"100%", "100%");

      var x=50, y=50, w=30, h=20;

      paper.superRect(x, y, w, h, "abc").drag(move, dragger, up);

      x +=100;

      paper.superRect(x, y, w, h, "def").drag(move, dragger, up);

      x +=100;

      paper.superRect(x, y, w, h, "ghi").drag(move, dragger, up);