我遇到了一个问题,就是在画布上(可放置元素)制作可拖动元素的克隆。目前我只能拖动一张原始图像,但实际上我需要它的复制品以便能够拖动。这是它的工作方式(原图)和目前的工作方式(源1)(源2)。所以对于其他图像,这种方法并不起作用。
// 1 - wall, 0 - free/street
const map1 = [
[1, 1, 1, 1],
[0, 0, 0, 0],
[1, 0, 1, 1],
[1, 0, 0, 0]
];
const city = map1;
const size = 41;
window.onload = function() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
//draw images
const p = ctx.lineWidth; //padding
for (let i = 0; i < city.length; i++) {
for (let j = 0; j < city[i].length; j++) {
const x = i * size;
const y = j * size;
const img = new Image();
img.onload = function() {
ctx.drawImage(img, x, y, size + p * 2, size + p * 2);
};
img.src = city[i][j] == 0 ? "images/white.png" : "images/black.png";
}
}
};
$(document).ready(function() {
let currentDroppable = null;
const cam1 = document.getElementById('cam1');
cam1.onmousedown = function(event) {
let shiftX = event.clientX - cam1.getBoundingClientRect().left;
let shiftY = event.clientY - cam1.getBoundingClientRect().top;
cam1.style.position = 'absolute';
cam1.style.zIndex = 1000;
document.body.append(cam1);
moveAt(event.pageX, event.pageY);
function moveAt(pageX, pageY) {
cam1.style.left = pageX - shiftX + 'px';
cam1.style.top = pageY - shiftY + 'px';
}
function onMouseMove(event) {
moveAt(event.pageX, event.pageY);
cam1.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
cam1.hidden = false;
if (!elemBelow) return;
let droppableBelow = elemBelow.closest('#canvas');
if (currentDroppable != droppableBelow) {
if (currentDroppable) { // null when we were not over a droppable before this event
leaveDroppable(currentDroppable);
}
currentDroppable = droppableBelow;
if (currentDroppable) { // null if we're not coming over a droppable now
// (maybe just left the droppable)
enterDroppable(currentDroppable);
}
}
}
document.addEventListener('mousemove', onMouseMove);
cam1.onmouseup = function() {
document.removeEventListener('mousemove', onMouseMove);
cam1.onmouseup = null;
};
};
function enterDroppable(elem) {
elem.style.background = 'blue';
}
function leaveDroppable(elem) {
elem.style.background = '';
}
cam1.ondragstart = function() {
return false;
};
});
body {
color: #000;
}
h1,
footer {
text-align: center;
margin-top: 10px;
}
#game {
border: 1px solid #666;
position: relative;
width: 600px;
height: 450px;
margin: 0 auto;
z-index: 1;
background-color: gold;
}
#cam1 {
cursor: pointer;
}
#canvas {
cursor: pointer;
}
.cameras {
position: absolute;
flex-direction: column;
flex-wrap: wrap;
right: 0;
top: 0;
z-index: 200;
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cameras of the city</title>
<link rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-3.4.1.js"></script>
<script src="js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<header>
<h1>cameras of the city</h1>
</header>
<div id="game">
<canvas height="450px" width="450px" id="canvas"></canvas>
<div class="cameras">
<img id="cam1" src="images/camera1.png">
<img id="cam2" src="images/camera2.png">
<img id="cam3" src="images/camera3.png">
<img id="cam4" src="images/camera4.png">
</div>
</div>
<footer>
created:
</footer>
<script src="js/core.js"></script>
</body>
</html>