我希望以前没有人问过这个问题。 我不知道如何真正解释我的问题，但我会尽力的。因此，目前我正在尝试构建一个应用程序，使您可以在双击Div时移动Div。但是有时当我移动Div时，会有禁止的标志。我希望有人能帮助我。
class Block {
constructor(canvas) {
this.define = {
class: "block",
size: {
width: 100,
height: 100
},
pos: {
x: 50,
y: -274
}
}
this.function = {}
this.editMode = false;
this.canvas = canvas;
this.block = document.createElement("div");
this.div = document.createElement("div");
this.div.style.position = "fixed";
this.div.style.marginTop = "-" + (window.innerHeight - 17) + "px";
this.div.ondblclick = (e) => {
if (this.editMode === false) {
/* this.x = e.clientX;
this.y = e.clientY;
console.log("Startwert X: " + this.x);
console.log("Startwert Y: " + this.y); */
this.enterEditMode();
} else if (this.editMode) {
this.leaveEditMode();
}
}
this.block.appendChild(this.div);
this.refresh();
}
add() {
document.body.appendChild(this.block);
}
remove() {
document.body.removeChild(this.block);
}
refresh() {
this.div.style.width = this.define.size.width + "px";
this.div.style.height = this.define.size.height + "px";
if (this.function.html != null) {
this.div.innerHTML = this.function.html;
}
if (this.function.script != null) {
eval(this.function.script);
}
if (this.define.class != null) {
this.div.classList.add(this.define.class);
} else {
this.div.classList.add("block");
}
if (this.define.pos.x != null) {
this.div.style.left = this.define.pos.x + "px";
}
if (this.define.pos.y != null) {
this.div.style.marginTop = this.define.pos.y + "px";
}
}
enterEditMode() {
this.canvas.show();
this.div.style.borderStyle = "solid";
this.div.style.borderColor = "#a3abb3";
this.div.style.borderWidth = "1px";
this.editMode = true;
this.div.onmousedown = (e) => {
this.x = e.clientX;
this.y = e.clientY;
console.log("Startwert X: " + this.x);
console.log("Startwert Y: " + this.y);
this.mousedown = true;
};
this.div.onmouseup = (e) => {
this.mousedown = false;
}
this.div.onmousemove = (e) => {
if (this.mousedown) {
// -150 300
console.log("Startwert X: " + this.x);
console.log("Startwert Y: " + this.y);
var x = this.div.offsetWidth / 2;
var y = this.div.offsetHeight / 2;
console.log("X: " + x);
console.log("Y: " + y);
console.log("Mausposition: " + e.clientX);
console.log("Mausposition: " + e.clientY);
console.log("Bewegung X: " + e.clientX - x);
console.log("Bewegung Y: " + e.clientY - y);
console.log(" ");
this.div.style.left = (e.clientX - x) + "px";
this.div.style.marginTop = "-" + ((window.innerHeight - 17) - (e.clientY - y)) + "px";
this.define.pos.x = (e.clientX - x);
this.define.pos.y = -((window.innerHeight - 17) - (e.clientY - y));
}
}
this.div.onmouseleave = (e) => {
this.mousedown = false;
console.log("Leave!");
console.log(" ");
}
}
leaveEditMode() {
this.canvas.hide();
this.div.style.border = "none";
this.editMode = false;
this.div.onmousedown = (e) => {}
this.div.onmouseup = (e) => {}
this.div.onmousemove = (e) => {}
this.div.onmouseleave = (e) => {}
}
load(url) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
var response = JSON.parse(xmlHttp.responseText);
if (response.html != null) {
this.function.html = response.html;
}
if (response.script != null) {
this.function.script = response.script;
}
}
}
class Canvas {
constructor() {
this.canvas = document.getElementById("background_canvas");
this.canvas.width = window.innerWidth - 17;
this.canvas.height = window.innerHeight - 17;
this.ctx = this.canvas.getContext("2d");
}
show() {
var x1 = 0;
var y1 = 0;
var x2 = 50;
var y2 = 50;
for (var e = 0; e < (Math.floor(window.innerHeight / 50) + 1); e++) {
for (var i = 0; i < (Math.floor(window.innerWidth / 50) + 1); i++) {
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = "#dadada";
this.ctx.rect(x1, y1, x2, y2);
this.ctx.stroke();
x1 = x1 + 50;
}
y1 = y1 + 50;
x1 = 0;
}
}
hide() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
var block;
var block2;
window.onload = function() {
var canvas = new Canvas();
block = new Block(canvas);
block.refresh();
block.add();
block2 = new Block(canvas);
block2.refresh();
block2.add();
}html {
background-color: #eee;
}
body {
margin: 0;
}
.block {
box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 24px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
background-color: white;
float: left;
} <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<canvas id="background_canvas"></canvas>