定位选择器以执行拖放

Question

当我单击时，我在div中创建一个点。

我希望能够以拖放的方式移动这一点。

在我的代码中，我创建了一个橙色的项目，我可以移动，但我不能用我创建的点来做，我不能瞄准它。

此外，我希望当我移动点时，一旦设置好，就会保存新的坐标，而不是旧的坐标，并且当设置好点时，它会打开一个url(不管说谷歌(，但我不知道这是否可能。

$(document).ready(function() {
let count = 0;
let resultArray = [];
let addPoint = false;
let url;
$(".button").on('click', function() {
addPoint = !addPoint
});
$(".div1").click(function(ev) {
if (addPoint == true) {
$(".div1").append(
$(`<div>${count + 1}</div>`).css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '16px',
borderRadius: '12px',
background: 'blue',
color: 'white',
textAlign: 'center',
fontSize: '14px',
padding: '3px'
})
);
count = count + 1
url = "<a href='https://www.google.fr' target='blank'>url</a>"
$("#myTBody").append(
"<tr><td>" + count + "</td><td>" + ev.pageX + "</td><td>" + ev.pageY +
"</td><td>" + url + "</td></tr>"
)
let point = {
id: count,
x: ev.pageX,
y: ev.pageY,
url: url
}
resultArray.push(point);
// $("tr").on('click', function () {
// 	console.log($(this).children(":first").text())
// });
}
});
const el = document.querySelector(".item");
el.addEventListener('mousedown', mousedown);
function mousedown(e) {
window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseup', mouseup);
let prevX = e.clientX;
let prevY = e.clientY;
function mousemove(e) {
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
const rect = el.getBoundingClientRect();
el.style.left = rect.left - newX + "px";
el.style.top = rect.top - newY + "px";
prevX = e.clientX;
prevY = e.clientY;
}
function mouseup(e) {
window.removeEventListener("mousemove", mousemove);
window.removeEventListener("mouseup", mouseup);
}
}
});

.button {
padding: 10px;
}
.item {
height: 40px;
width: 40px;
position: absolute;
background: orange;
}
.div1 {
width: 400px;
height: 200px;
background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">Add a point</button>
<div class="item"></div>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PointID</th>
<th>PointX</th>
<th>PointY</th>
<th>URL</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>

Answer 1

这可能超出了您的预期。请考虑使用jQuery UI库，以便使用Draggable。请考虑以下示例。

$(function() {
let count = 0;
let resultArray = [];
let url;
function makePoint(trg, cnt, ev) {
var p = $("<div>", {
class: "point"
}).css({
top: ev.pageY + 'px',
left: ev.pageX + 'px'
}).html(cnt).appendTo(trg);
p.draggable({
containment: "parent",
stop: function(e, ui) {
var i = parseInt($(this).text());
updatePoint(i, e);
}
});
return {
id: cnt,
x: ev.pageX,
y: ev.pageY
};
}
function updatePoint(id, ev) {
$.each(resultArray, function(k, o) {
if (id == o.id) {
o.x = ev.pageX;
o.y = ev.pageY;
$("#myTBody tr:eq(" + k + ") td:eq(1)").html(ev.pageX);
$("#myTBody tr:eq(" + k + ") td:eq(2)").html(ev.pageY);
};
});
}
$(".button").click(function() {
$("input", this).prop("checked", !$("input", this).prop("checked"));
if ($("input", this).is(":checked")) {
$(".ui-draggable").draggable("disable");
} else {
$(".ui-draggable").draggable("enable");
}
$(this).toggleClass("clicked");
});
$(".div1").click(function(e) {
if ($(".button input").is(":checked")) {
let point = makePoint($(".div1"), ++count, e);
point.url = "<a href='https://www.google.fr' target='blank'>url</a>";
resultArray.push(point);
$("#myTBody").append(
"<tr><td>" + count + "</td><td>" + point.x + "</td><td>" + point.y +
"</td><td>" + point.url + "</td></tr>"
)
}
});
$(".item").draggable({
containment: ".div1"
});
});

.button {
padding: .2em .4em;
border: 1px solid #6c6c6c;
border-radius: 3px;
background-color: #eee;
width: auto;
max-width: 100px;
cursor: pointer;
}
.button input {
display: none;
}
.item {
height: 40px;
width: 40px;
position: absolute;
background: orange;
}
.div1 {
width: 400px;
height: 200px;
background-color: grey;
}
.point {
position: absolute;
width: 16px;
border-radius: 12px;
background: blue;
color: white;
text-align: center;
font-size: 14px;
padding: 3px;
cursor: default;
}
.clicked {
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.js"></script>
<div class="button"><input type="checkbox"><span class="label">Add a Point</span></div>
<div class="item"></div>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PointID</th>
<th>PointX</th>
<th>PointY</th>
<th>URL</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>

你可以看到我做了一些小改动。从某种意义上说，使用复选框可以进行故障切换。这也提供了一个切换的外观/样式，以便用户知道何时可以添加点。

使用jQueryDraggable，这只会使管理可拖动元素变得更加容易。项目从一开始就可以拖动。添加点时，不允许拖动。关闭后，可以拖动所有项目。移动点会更新"阵列"one_answers"表格"。