title: How to use % instead of px with draggable element?
body: <p>I'm stucked and I need help. I'm making map with markers. I can add markers etc.
  My main container have 100% width and height. When I click somewhere my marker has % values for example top: 34%; left: 35%;
  After dragging marker new position have px value. I want to save % values.
  Any ideas?</p>
  
  <p>map.js</p>
  
  <pre><code>jQuery(document).ready(function($){
  
  // basic add
  
  $("button#remove").click(function(){
  $(".marker").remove();
  });
  
  
  //add with position
  var map = $(".map");
  var pid = 0;
  
  function AddPoint(x, y, maps) {
  
      // $(maps).append('&lt;div class="marker"&gt;&lt;/div&gt;');
      var marker = $('&lt;div class="marker ui-widget-content"&gt;&lt;/div&gt;');
      marker.css({
          "left": x,
          "top": y
      });
      marker.attr("id", "point-" + pid++);
      $(maps).append(marker)
      $('.marker').draggable().resizable();
  }
  map.click(function (e) {
          // var x = e.pageX - this.offsetLeft;
          // var y = e.pageY - this.offsetTop;
          var x = e.offsetX/ $(this).width() * 100 + '%';
          var y = e.offsetY/ $(this).height() * 100 + '%';
  
          // $(this).append('&lt;div class="marker"&gt;&lt;/div&gt;');
          AddPoint(x, y, this);
  });
  
  
  // drag function
  $(".ui-widget-content").draggable({
      drag: function( event, ui ) {
          var x = e.offsetX/ $(this).width() * 100 + '%';
          var y = e.offsetY/ $(this).height() * 100 + '%';
   }
  });
  
  });
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.wrapper {
  margin: 0 auto;
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  }
  
  .map {
  width: 100%;
  position: relative;
  }
  
  .map &gt; img {
  max-width: 100%;
  max-height: 100%;
  }
  .marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 1);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  }
  
  #mapa {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 1);
  z-index: 999;   
  }
  </code></pre>
  
  <p>some html code</p>
  
  <pre><code>    &lt;div class="wrapper"&gt;
      &lt;div class="map"&gt;
          &lt;img src="http://i.imgur.com/HtxXGR5.jpg" width="100%" height="auto" margin="15px 0;" alt=""&gt;
      &lt;/div&gt;
      &lt;button id="remove"&gt;Remove all markers&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>