<div id="MainDiv">
 <div id="annotationText">
    <svg id="circle" width="50" height="50">
  <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0"/>
</svg>
</div>
</div>

makeDragableCircle('#annotationText',jQuery('#MainDiv'));




 function makeDragableCircle(selector,obj){
    var height=obj.height();
    var width=obj.width();
    var objdiv=jQuery( selector );
      jQuery( selector ).draggable({
          containment: obj,
          drag: function( event, ui ) {
          var cleft=ui.position.left*100/width;
          var top=ui.position.top*100/height;
          jQuery(event.target).attr('data-offsetx',cleft);
          jQuery(event.target).attr('data-offsety',top);

          }

      }).resizable({
         alsoResize: "#"+circle,
          aspectRatio: 1.0
      });

    }