SVG jQuery UI Drag Example

Add a custom drag handler to jQuery UI draggable in order to drag jQuery-SVG elements around

HTML

<link rel="stylesheet" href="http://cdl.best.vwh.net/CIS680/C11_Graphics/js/jquery.svg.css">
<script src="http://cdl.best.vwh.net/CIS680/C11_Graphics/js/jquery.svg.js"></script>
<div  id="svg_canvas">
<svg version="1.1" width="720" height="125">
    <rect id="request_1" class="hey" x="180.5" y="15" width="39" height="15">
    </rect>
</svg>

<svg version="1.1" width="720" height="125">
    <rect id="request_2" x="180.5" y="15" width="39" height="15">
    </rect>
</svg>
</div>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
  <svg version="1.1" width="720" height="125">
    <rect id="request_2" x="180.5" y="15" width="39" height="15">
    </rect>
</svg>
  </p>
</div>

CSS

#svg_canvas {
    position: relative;
    height: 400px;
    width: 400px;
    background: #ffc;
}

JavaScript

$(document).ready(function(){
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "rect" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
});