JSFiddle - React, Tailwind, and code Playground

by Francisco Maria Calisto

HTML

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style type="text/css" media="screen">
        svg rect { cursor: move; }
    </style>
</head>
  <body>
    <h1>SVG/HTML 5 Example</h1>
    <svg id="cvs">
        <rect draggable="true" x="0" y="10" width="100" height="80" fill="#69c" />
        <rect x="50" y="50" width="90" height="50" fill="#c66" />        
      </svg>
          <script type="text/javascript" src="loc.js"></script>
  </body>
</html>

JavaScript

$(document).ready(function() {    
    function handleDragStart(e) {
        log("handleDragStart");                
          this.style.opacity = '0.4';  // this ==> e.target is the source node.
    };

    var registercb = function () {
            $("#cvs > rect").each(function() {
                  $(this).attr('draggable', 'true');
              });
            $("#cvs > rect").bind('dragstart', handleDragStart);    
            $(window).mousedown(function (e) {        

            });    
            $(window).mousemove(function (e) {                
            });
            $(window).mouseup(function (e) {
                log("mouseup");                
            });
        };

    function log() {
        if (window.console && window.console.log)
            window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' '));
    };
    
    registercb();
});