SVG for PlantUML interaction

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
  <p> clicked object: </p>
  <button id="down">id</button>
  <button id="up">id</button>
  <button id="move">id</button>

  <svg version="1.1" contentScriptType="application/ecmascript" contentStyleType="text/css" height="null" preserveAspectRatio="none" style="width:130px;height:49px;" viewBox="0 0 130 49" width="172" zoomAndPan="magnify">
    <defs>
      <filter height="300%" id="f1bzcxteg7w2u" width="300%" x="-1" y="-1">
        <feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur>
        <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix>
        <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset>
        <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend>
      </filter>
    </defs>
    <g>
      <!--class B-->
      <rect fill="#FEFECE" filter="url(#f1bzcxteg7w2u)" height="32" id="B" style="stroke: #A80036; stroke-width: 1.5;" width="40" x="6" y="8"></rect>
      <ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"></ellipse>
      <path d="M23.3438,19.6719 L23.5156,19.75 C23.7344,19.4375 23.9375,19.3438 24.2344,19.3438 C24.5313,19.3438 24.8125,19.4844 24.9688,19.75 C25.0625,19.9063 25.0781,20.0313 25.0781,20.4688 L25.0781,21.8906 C25.0781,22.3125 25.0469,22.5 24.9375,22.6563 C24.7656,22.875 24.5,23.0156 24.2344,23.0156 C24.0156,23.0156 23.7813,22.9063 23.6406,22.7656 C23.5,22.6406 23.4688,22.5156 23.4063,22.1094 C23.3125,21.7031 23.1406,21.4844 22.6563,21.2031 C22.1875,20.9531 21.5781,20.7969 21,20.7969 C19.2656,20.7969 18.0156,22.1094 18.0156,23.8906 L18.0156,24.9844 C18.0156,26.6875 19.3125,27.7813 21.3594,27.7813 C22.125,27.7813 22.8125,27.6563 23.2344,27.3906...

CSS

svg {
  pointer-events: none;
}

svg * {
  pointer-events: all;
}

JavaScript

var zvalmax = 2;
        $("[id^='svg']").draggable({
          scroll: false,
          start: function(e) {
            $(this).css("z-index", ++zvalmax);
          },
          stop: function(e) {

          }
        });
        document.onmousedown = whodown;
        document.onmouseup = whoup;
        document.ontouchstart = handleStart;
        document.ontouchend = handleEnd;
        document.ontouchmove = handleMove;

        function whodown(e) {
          console.log("whodown");
          var id = e.target.id;
          var cl = e.target.classList[0];
          $("#down").html(cl + ":" + id);
        };

        function whoup(e) {
          console.log("whoup");
          var id = e.target.id;
          var cl = e.target.classList[0];
          $("#up").html(cl + ":" + id);
        }

        function handleStart(e) {
          e.preventDefault();
          e.stopPropagation();
          console.log("handleStart");
          var id = e.target.id;
          var cl = e.target.classList[0];
          $("#down").html(cl + ":" + id);
        };

        function handleEnd(e) {
          e.preventDefault();
          e.stopPropagation();
          var changedTouch = e.changedTouches[0];
          var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
          // Do something with elem
          console.log("handleEnd");
          var id = elem.id;
          var cl = elem.classList[0];
          $("#up").html(cl + ":" + id);
          $("#move").html("stopped");
        }

        function handleMove(e) {
          e.preventDefault();
          e.stopPropagation();
          console.log("handleMove");
          var id = e.target.id;
          var cl = e.target.classList[0];
          $("#move").html("Moving...");
        }