Javascript - 拖动后如何获取矩形、圆形坐标？答案

【问题标题】：Javascript - how to get rect, circle coords after dragging?Javascript - 拖动后如何获取矩形、圆形坐标？
【发布时间】：2018-02-13 08:16:34
【问题描述】：

拖动后如何获取我的rect1和circle1的coords值？

（例如稍后在地图元素中使用。 <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>

【问题讨论】：

标签： javascript jquery google-chrome jquery-ui coords

【解决方案1】：

你可以这样做

$(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
  //});
  }
});
});

【讨论】：

1) 它给了我左值和最高值，但在坐标上我需要 4 个值。 2）我如何从你的 2 个值（左，上）中得到 4 个值？
试试这个，如果有帮助请告诉我
当我拖动 rect1 或 circle1 时，两者都给我相同的值`底部：722 高度：722 左侧：0 右侧：1282 顶部：0 宽度：1282`
其实它循环遍历所有元素，你每次都会得到圆的坐标，让我为你简化
@YumYumYum 试试这个