拖动点时更新数据

Question

编辑：

所以我编辑了我的 post 和我的代码。

根据 Justinas 告诉我的内容，我更改了我的代码，所以我在 div 下方显示了 3 个点的信息。

但问题是，当我移动一个点时，新信息会显示在其他点的下方。

我希望信息直接在相关显示中自行更新，而无需在下方重新创建新信息。

感谢您的帮助，再次抱歉我的英语问题。

这是我的代码：

$(function () {

    let data = [
        ["1", "123", "247", "#FF0000",
            "https://www.google.com",
            "https://www.google.com"
        ],
        ["2", "785", "230", "#FF0000",
            "https://www.google.com",
            "https://www.google.com"
        ],
        ["3", "422", "332", "#FF0000",
            "https://www.google.com",
            "https://www.google.com"
        ]
    ];

    let url;
    let pastille;
    let urlOpen;
    let urlMove;

    for (i = 0; i < data.length; i++) {
        let datas = data[i];
        let id = datas[0];
        let x = datas[1];
        let y = datas[2];
        pastille = document.createElement('a');
        urlFmOpen = datas[4];
        pastille.setAttribute("href", urlFmOpen);
        pastille.setAttribute("class", "pointData");
        pastille.textContent = datas[0];
        pastille.style.textDecoration = "none";
        pastille.style.backgroundColor = datas[3];
        pastille.style.position = "absolute";
        pastille.style.width = "16px";
        pastille.style.borderRadius = "12px";
        pastille.style.border = "2px solid white";
        pastille.style.color = "white";
        pastille.style.textAlign = "center";
        pastille.style.fontSize = "14px";
        pastille.style.cursor = "pointer";
        pastille.style.padding = "3px";
        pastille.style.left = (datas[1] - 11) + "px";
        pastille.style.top = (datas[2] - 11) + "px";
        urlFmMove = datas[5];
        $("body").append(pastille);
        $('#info').append("<p>" + 'id ' + id + ' x: ' + x  +  ' y: ' + y +  "</p>")
        var testurl;
        $(pastille).draggable({
            stop: function () {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $('#info').append("<p>" + 'id ' + id + ' x: ' + xPos + ' y: ' + yPos + "</p>")
                // testurl = window.location.href = urlFmMove + "&$PosX=" + xPos + "&$PosY=" +
                //     yPos;
                console.log("xPos: " + xPos + " yPos: " + yPos)
            }
        })
    }

    
});

.div1 {
      width: 900px;
      height: 600px;
      background-color: grey;
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
     <div class="div1"></div>
    <div id="info">
       
    </div>

Answer 1

从您的评论中我看到您需要做的就是跟踪每个元素的所有坐标。对于具有唯一 ID 并在拖动停止时附加的元素，只需编辑它的内容

$(function() {

  let data = [
    ["1", "20", "30", "#FF0000",
      "https://www.google.com",
      "https://www.google.com"
    ],
    ["2", "60", "90", "#FF0000",
      "https://www.google.com",
      "https://www.google.com"
    ],
    ["3", "90", "150", "#FF0000",
      "https://www.google.com",
      "https://www.google.com"
    ]
  ];

  let url;
  let pastille;
  let urlOpen;
  let urlMove;

  for (i = 0; i < data.length; i++) {
    let datas = data[i];
    let id = datas[0];
    let x = datas[1];
    let y = datas[2];
    pastille = $('<a>');
    pastille
      .attr('href', datas[4])
      .addClass('pointData')
      .css({
        backgroundColor: datas[3],
        left: (datas[1] - 11) + 'px',
        top: (datas[2] - 11) + 'px'
      })
      .text(datas[0]);

    urlFmMove = datas[5];
    $("body").append(pastille);
    let info = $('<p>');
    info
      .attr('id', 'id-' + id)
      .text('id ' + id + ' x: ' + x + ' y: ' + y)
    $('#info').append(info)
    var testurl;

    $(pastille).draggable({
      stop: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#id-' + id).text('id ' + id + ' x: ' + xPos + ' y: ' + yPos);

        console.log("xPos: " + xPos, " yPos: " + yPos);
      }
    })
  }


});

.div1 {
  width: 100%;
  height: 200px;
  background-color: grey;
}

.pointData {
  text-decoration: none;
  padding: 3px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  color: wite;
  border: 2px solid white;
  border-radius: 12px;
  width: 16px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="div1"></div>
<div id="info">

</div>

拖动点时更新数据

Update a data when I drag a point

javascript

jquery

jquery-ui

updates

draggable