JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/vitorhsb/raphael/168a90edbaacf8615b31dc2cde164a8dd41b50ca/raphael.js"></script>
<div id="iPhone"></div>
<span id="status">Coordinates X: -- Y: --</span>Base

CSS

body {
    background-color: rgb(70,70,70);
    color: #fff;
}

#iPhone {
    background-color: rgba(0,0,0,0.1);
    width: 320px;
    height: 300px;
}

JavaScript

// You can visit this test page on an iPod/iPhone/iPad here:
// http://www.farmsoftstudios.com/sandbox/svgdrag/
// http://bit.ly/ltnbyC -- for those sick of typing

var paper = Raphael("iPhone", 320, 400);

// The text element
var dragText = paper.text(50, 50, "this is a test").attr({fill: "#fff"});

var st = paper.set();
st.push(dragText);

// Uncomment the following line (as well as the last line) and it works on iDevices.
//var dragBrick = paper.rect(80, 80, 50, 50).attr({fill: "#333", stroke: "none"});

// Drag functionality implemented from the documentation
    
move = function(dx, dy) {
   // move will be called with dx and dy
   var x = dx,
       y = dy;

    this.attr({
        x: dx,
        y: dy
    });
    
    // Show what is happening with the X and Y    
    document.getElementById('status').innerHTML = "Coordinates X: " + x + " Y: " + y;
}

st.drag(move);
//dragBrick.drag(move, start);