拖动点时更新数据

Question

编辑：

所以我编辑了我的帖子和代码。

根据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>