TheWayOfCoding.com

In this example, I go over a simple use of Raphael.js. It draws 4 boxes on the page and allows you to move and resize each independently. Here is the graphics library (licenses under the MIT license): https://dmitrybaranovskiy.github.io/raphael/ Here is my code on GitHub. https://www.youtube.com/watch?v=RVXQWsFDDgU The basic gist of it is to initialize the primary Raphael object and apply it to the page. After that you create the boxes you want to draw and associate them with a “drag” function that is called when the user interacts with each box. Here is a selection of the code below: // Define 4 boxes to draw on screen var boxListing = [ { x: '10', y: '10', width: '70', height: '70', boxname: 'Box 1' }, { x: '110', y: '10', width: '70', height: '70', boxname: 'Box 2' }, { x: '210', y: '10', width: '80', height: '80', boxname: 'Box 3' }, { x: '310...