Search code examples
javascriptjquerygoogle-chromejquery-uicoords

Javascript - how to get rect, circle coords after dragging?

How to get the coords value of my rect1 and circle1 after dragging?

(For example to use in later in map element. <area shape="rect" coords="454, 328, 637, 392" nohref onclick="void();"/> <area shape="circle" coords="451, 238, 827, 527" nohref onclick="type();" />)

DEMO:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    #parent {
      position: absolute;top:0px;left:0px; width: 1280px; height: 720px;
       background-color:red;
    }
    #rect1 { width: 150px; height: 150px; padding: 0.5em; }

    .circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    }

    .type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  //
  // !!!IMPORTANT!!! GOAL
  // ============================= ******
  // Get the coords after dragging and store the last value here
  // ============================= ******
  //
  var rect_coords = "";
  var circle_coords = "";

  $(function(){
    $( "#rect1" ).draggable({ containment: "parent" });
    $( "#circle1" ).draggable({ containment: "parent" });
  });
  </script>
</head>
<body>

  <div id="parent">

    <div id="rect1" class="ui-widget-content">
      <p>Rect</p>
    </div>


    <div id="circle1" class="ui-widget-content circleBase type1">
      <p>Circle</p>
    </div>    

  </div>



</body>
</html>
Solution

  • you can do it like this 

    $(function(){
$( "#rect1" ).draggable({ containment: "parent" });
$( "#circle1" ).draggable({ containment: "parent" });
$( "#parent" ).droppable({
  drop: function( event, ui ) {
   //$("#parent").each(function (i, el) {    
    var coords= event.toElement.getBoundingClientRect();
    alert(coords);
    // now rect has all the attributes
  //});
  }
});
});