JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<script src="http://grover.open2space.com/sites/default/files/articles/raphael/js/raphael-min.js"></script>
<script src="http://grover.open2space.com/sites/default/files/articles/raphael/js/raphael.draggable.js"></script>
<div id="workspace" style="width: 100%; height: 100%;"></div>

JavaScript

//variables we'll need throughout the sample code
        var workspace;
        var groups = [];     //just an array of the sets we create.
    
        //Stuff to do when the page is done loading
        $(document).ready( function () {
            redraw();
        });

        //The routine to repaint the drawing area
        function redraw() {
            workspace = Raphael('workspace', "100%", "80%");

            //Add a rectangle
            var rect = workspace.rect(0,0, 150, 100, 3);
            rect.attr({
                "stroke": "#00f",
                "stroke-width": 2,
                "fill" : "#fff"
            });

            var txt =  workspace.text(75, 50, "Drag/Drop\nExample");
            txt.attr({
                "width" : 150,
                "fill": "#000",
                "font-size": "12pt",
                "font-weight": "bold"
            });

            //Create a set so we can move the text and rectangle at the same time
            var g = workspace.set(rect, txt);
            rect.idx = groups.length;   //index in our groups array,
                                        //so we can easily find the set later
            groups.push(g);

            //set up drag/drop
            // - This could be applied to the set as well, but the "dragged"
            //   object ends up being the rect anyways.
            rect.drag(dragMove, dragStart, dragStop);
        }

        //set up our object for dragging
        function dragStart() {
            var g = null;
            if (!isNaN(this.idx)) {
                //find the set (if possible)
                var g = groups[this.idx];
            }
            if (g) {
                var i;
                //store the starting point for each item in the set
                for(i=0; i < g.items.length; i++) {
                    g.items[i].ox = g.items[i].attr("x");
                    g.items[i].oy = g.items[i].attr("y");
                }
            }
        }

        //clean...