Zwei Möglichkeiten, HTML zu implementieren, um Inhaltspositionen zufällig zu verschieben

#Reichweite {
    Position: relativ;
    Breite: 600px;
    Höhe: 400px;
    Rand: 10px;
    Hintergrundfarbe: RGB (133, 246, 250);
}

.Symbol {
    Position: absolut;
    Höhe: 100px;
    Breite: 100px;
    Cursor: bewegen;
    Hintergrundfarbe: #ff9204;
    Benutzerauswahl: keine;
}

<div id="Bereich">
    <div Klasse="Symbol">100*100</div>
</div>

const main = document.getElementById('Bereich');
const icon = document.querySelector('.icon');
lass bewegen = falsch;
sei deltaLeft = 0, deltaTop = 0;

// Drag-Start-Event, das an das verschobene Element gebunden werden soll icon.addEventListener('mousedown', function (e) {
    /*
    * @des deltaLeft ist der Wert, der während der Bewegung unverändert bleibt*/
    deltaLeft = e.clientX-e.target.offsetLeft;
    deltaTop = e.clientY-e.target.offsetTop;
    bewegen = wahr;
})

// Das mobile Trigger-Event soll auf dem Flächen-Steuerelement platziert werden main.addEventListener('mousemove', function (e) {
    wenn (bewegen) {
        const cx = e.clientX;
        const cy = e.clientY;
        /**Subtrahieren, um die Position relativ zum übergeordneten Element zu erhalten*/   
        sei dx = cx - deltaLeft
        sei dy = cy - deltaTop

        /** Überschreiten des Bereichs des übergeordneten Elements verhindern */
        wenn (dx < 0) dx = 0
        wenn (dy < 0) dy = 0
        wenn (dx > 500) dx = 500
        wenn (dy > 300) dy = 300
        icon.setAttribute('Stil', `links:${dx}px;oben:${dy}px`)
    }
})

// Der Drag-End-Trigger soll auf dem Flächenkontrollelement platziert werden main.addEventListener('mouseup', function (e) {
    bewegen = falsch;
    Konsole.log('Maus hoch');
})

.cus-canvas{
    Hintergrund: rgb(50, 204, 243);
}

.input-ele{
    Anzeige: keine;
    Position: fest;
    Breite: 180px;
    Rand: 0;
    Hintergrundfarbe: #fff;
}

<div>
    <canvas id="canvas" Klasse="cus-canvas" Breite="800" Höhe="600"></canvas>
    <input id="inputEle" class="input-ele"/>
</div>

lass mouseDown = false;
sei deltaX = 0;
sei deltaY = 0;
let text = "hallo"
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const cw = Leinwandbreite, ch = Leinwandhöhe;
Konstantenrechteck = {
    x: 20,
    Jahr: 20,
    Breite: 150,
    Höhe: 50
}

/** Text- und Rahmenstile festlegen */
ctx.font="16px Arial";
ctx.fillStyle = "#fff"; 
/** Wenn auf Mitte gesetzt, liegt die Mitte des Textsegments am x-Punkt von fillText*/
ctx.textAlign = "zentriert";
ctx.Zeilenbreite = '2';
ctx.strokeStyle = "#fff";

StrichRect()

const inputEle = document.getElementById('inputEle');
inputEle.onkeyup = Funktion(e) {
    wenn(e.schlüsselCode === 13) {
        Text = Eingabeelement.Wert
        StrichRect()
        inputEle.setAttribute('Stil', `Anzeige: keine`)
    }
}

canvas.ondblclick = Funktion(e){ 
    inputEle.setAttribute('Stil', `links: ${e.clientX}px;oben: ${e.clientY}px;Anzeige:Block`);
    inputEle.focus();
}

canvas.onmousedown = Funktion(e){ 
    /** Ermitteln Sie den Abstand zwischen dem linken Rand des Ansichtsfensters und dem linken Rand der Leinwand plus die Länge zwischen der Mausklickposition und dem linken Rand der Leinwand. Dieser Wert ist der konstante Wert während der relativen Bewegung*/
    deltaX = e.clientX - rect.x;
    deltaY=e.clientY - rect.y;
    mouseDown = wahr
};  

const judgeW = cw-Rechteck.Breite, judgeH = ch-Rechteck.Höhe;

canvas.onmousemove = Funktion(e){ 
    wenn(Maus nach unten) {
        /**Subtrahieren, um die Länge zwischen der linken Grenze des Rechtecks ​​und der linken Grenze der Leinwand zu erhalten*/
        sei dx = e.clientX-deltaX; 
        lass dy = e.clientY-deltaY; 
        wenn(dx < 0) {
            dx = 0;
        } sonst wenn (dx > judgeW) {
            dx = RichterW;
        }
        wenn(dy < 0) {
            dy = 0;
        } sonst wenn(dy > judgeH) {
            dy = RichterH;
        }
        Rechteck.x = dx;
        Rechteck.y = dy; 
        StrichRect()
    }
};  
canvas.onmouseup = Funktion(e){ 
    mouseDown = false
};  

/** Den angegebenen Bereich löschen */
Funktion clearRect() {
    ctx.clearRect(0, 0, cw, ch)
}

/** Zeichne ein Rechteck */
Funktion StrichRechteck() {
    clearRect()

    /** Wenn beginPath hier nicht aufgerufen wird, wird das Verlaufsrechteck neu gezeichnet*/
    ctx.beginPath() 
    ctx.rect(rechteck.x, rechteck.y, rechteck.breite, rechteck.höhe)
    ctx.stroke();
    // Schriftinhalt und dessen Position auf der Leinwand festlegen ctx.fillText(text, rect.x + 70, rect.y + 30);
}