移动时如何显示可拖动对象的坐标？

Question

当同时按下mousedown和mousemove事件时，我希望可拖动对象的坐标。在我的代码中，您将看到；

mousemove: function (event) {
    if (ismousedown == true) {
        ......

因此，它符合我写的最高要求。现在，我想在代码中编辑initDraggable函数以显示对象的坐标。当我为其编写代码时，它仅显示第一个坐标。

$(function() {
  var widget;
  var inner;
  var x;
  var y;
  var finX;
  var finY;
  var ismousedown = false;
  var renk = "black";
  var bolumadi;
  var bolum_array = [];
  var count = 1;
  var id = "alan" + count;

  $(document).on({

    mousedown: function(event) {
      if ($(event.target).attr('class') == 'wrapper') {
        x = event.pageX - 32;
        y = event.pageY - 140;

        var coordinates = function() {
          $('#results').text('X: ' + x + ' ' + 'Y: ' + y);
        }

        renk = $("#renk").val();
        bolumadi = $("#bolumadi").val();

        if (bolum_array.length == 0) {
          if (bolumadi == "") {
            alert("Lütfen bölüm adını giriniz");

          } else {
            bolum_array.push(bolumadi);
            $('.wrapper').append('<div class="widget" id= "alan ' + count + '" style="top:' + y + 'px; left: ' + x + 'px;"><div class="widget-inner"></div><div class="resize-widget"></div><div class="remove-widget"></div></div>');
            widget = $('.widget').last();

            widget.css('border', '2px solid' + renk);
            inner = widget.find('.widget-inner');
            ismousedown = true;

            $(".widget-inner").text(bolumadi).css({
              "color": "black",
              "text-align": "center"
            });
            id = "alan" + count;
            count++;
          }
        } else {
          if (bolumadi == "")
            alert("Lütfen bölüm adını giriniz");

          else if (bolum_array.includes(bolumadi))
            alert("Bu bölüm adı zaten var. Farklı bir bölüm adı giriniz");

          else {
            bolum_array.push(bolumadi);
            $('.wrapper').append('<div class="widget" id= "alan ' + count + '" style="top:' + y + 'px; left: ' + x + 'px;"><div class="widget-inner"></div><div class="resize-widget"></div><div class="remove-widget"></div></div>');
            widget = $('.widget').last();
            widget.css('border', '2px solid' + renk);
            inner = widget.find('.widget-inner');
            ismousedown = true;
            $("div.widget-inner").last().text(bolumadi).css({
              "color": "black",
              "text-align": "center"
            });
            id = "alan" + count;
            count++;
          }
        }
        console.log('Alan adı: ' + bolumadi);
        console.log('Renk: ' + renk);
        console.log('X: ' + x + ' ' + 'Y: ' + y);
        console.log("-----------" + 'X: ' + x + ' ' + 'Y: ' + y);

      }
    },

    mousemove: function(event) {
      if (ismousedown == true) {
        if (!$(event.target).hasClass(".wrapper")) {
          finX = Math.floor(event.pageX / 50) * 50;
          finY = Math.floor(event.pageY / 50) * 50;
          widget.width(finX - x);
          widget.height(finY - y);
          widget.css({
            'width': (finX - x) + '!important',
            'height': (finY - y) + '!important',
            'display': 'block'
          });
          console.log('Genişlik: ' + (finX - x));
          console.log('Yükseklik: ' + (finY - y));


        }
      }
    },

    mouseup: function(event) {
      ismousedown = false;
      initResizable();
      initDraggable();
    }
  }, '.wrapper');

  // UI Initialization
  function initResizable() {
    $('.widget').resizable({
      grid: [1, 1]
    });
  }

  function initDraggable() {
    $('.widget').draggable({
      containment: 'parent',
      grid: [1, 1],

    });
  }

  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav")
      x.className += " responsive";

    else
      x.className = "topnav";
  }

  $(document).on('click', '.remove-widget', function() {
    $(this).closest('.widget').remove();
  });

  $(document).on('click', '#kaydet', function() {
    alert("-----------" + 'X: ' + x + ' ' + 'Y: ' + y);
  });


});

.wrapper {
  position: absolute;
  margin-bottom: 320px;
  height: 100%;
  width: 95%;
  background-image: url("../Images/kroki2v3.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.widget {
  display: block;
  position: absolute;
  cursor: move;
  min-width: 50px;
  min-height: 50px;
}

.widget-inner {
  position: absolute;
  top: 0.1px;
  right: 0.1px;
  bottom: 0.1px;
  left: 0.1px;
}

.ui-resizable-se {
  height: 2px;
  width: 2px;
  cursor: se-resize;
  position: absolute;
  right: 5px;
  bottom: 5px;
}

.resize-widget {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.resize-widget::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f054";
  font-weight: 800;
  display: inline-block;
  z-index: 1;
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 15px;
  color: renk;
  transform: rotate(45deg);
  pointer-events: none;
}

.remove-widget {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 5px;
  top: 3px;
  cursor: pointer;
}

.remove-widget::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f00d";
  font-weight: 800;
  display: inline-block;
  z-index: 1;
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 15px;
  color: renk;
  pointer-events: none;
}

.results {
  text-align: center;
  margin-left: 400px;
  margin-top: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta lang="en">
  <meta name="keywords" content="footer, address, phone, icons" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pavo Tasarım Takip Sistemi Projesi</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
  <link href="~/Content/Site.css" rel="stylesheet" />
  <script src="~/Scripts/script.js"></script>
</head>

<body>
  
  <div class="properties-box">
    <table id="table_">
      <tr>
        <td><span>Renk:</span><input type="color" id="renk" /></td>
        <td><input type="text" id="bolumadi" placeholder="Bölüm Adı" title="Bölüm adını giriniz: " /></td>
        <td><input type="button" class="submit" value="Ekle" /></td>
        <td><input type="button" class="submit" value="Kaydet" id="kaydet" /></td>
      </tr>

    </table>
  </div>

  <div class="results"></div>

  <div class="wrapper"></div>
</body>

</html>