コンテンツの位置をランダムにドラッグするHTMLを実装する2つの方法

＃範囲 {
    位置: 相対的;
    幅: 600ピクセル;
    高さ: 400px;
    マージン: 10px;
    背景色: rgb(133, 246, 250);
}

.アイコン {
    位置: 絶対;
    高さ: 100px;
    幅: 100ピクセル;
    カーソル: 移動;
    背景色: #ff9204;
    ユーザー選択: なし;
}

<div id="範囲">
    <div class="icon">100*100</div>
</div>

const main = document.getElementById('range');
const icon = document.querySelector('.icon');
移動 = false にします。
deltaLeft = 0、deltaTop = 0 とします。

// ドラッグ開始イベント。移動された要素にバインドされます。icon.addEventListener('mousedown', function (e) {
    /*
    * @des deltaLeft は移動中に変化しない値です*/
    デルタ左 = e.clientX-e.target.offsetLeft;
    デルタTop = e.clientY-e.target.offsetTop;
    移動 = true;
})

// モバイルトリガーイベントはエリアコントロール要素に配置する必要があります main.addEventListener('mousemove', function (e) {
    （移動）の場合{
        cx は、クライアント X の定数です。
        定数 cy = e.clientY;
        /** 親要素からの相対位置を取得するために減算します*/   
        dx = cx - deltaLeftとします
        dy = cy - deltaTopとします

        /** 親要素の範囲を超えないようにする */
        （dx < 0）の場合、dx = 0
        （dy < 0）の場合dy = 0
        （dx > 500）の場合、dx = 500
        （dy > 300）の場合dy = 300
        icon.setAttribute('style', `左:${dx}px;上:${dy}px`)
    }
})

// ドラッグ終了トリガーはエリアコントロール要素に配置する必要があります main.addEventListener('mouseup', function (e) {
    移動 = false;
    console.log('マウスアップ');
})

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

.入力要素{
    表示: なし;
    位置: 固定;
    幅: 180ピクセル;
    境界線: 0;
    背景色: #fff;
}

<div>
    <canvas id="canvas" class="cus-canvas" width="800" height="600"></canvas>
    <input id="inputEle" class="input-ele"/>
</div>

mouseDown を false にします。
deltaX = 0 とします。
deltaY = 0 とします。
テキストを「hello」にします
定数キャンバス = document.getElementById('キャンバス');
const ctx = canvas.getContext('2d');
定数 cw = canvas.width、ch = canvas.height;
定数矩形 = {
    x: 20,
    y: 20,
    幅: 150,
    高さ: 50
}

/** テキストと境界線のスタイルを設定する */
ctx.font="16px Arial";
ctx.fillStyle = "#fff"; 
/** 中央に設定すると、テキストセグメントの中心は fillText の x ポイントになります*/
ctx.textAlign = 'center';
ctx.lineWidth = '2';
ctx.strokeStyle = '#fff';

ストローク矩形()

定数 inputEle = document.getElementById('inputEle');
inputEle.onkeyup = 関数(e) {
    if(e.keyCode === 13) {
        テキスト = inputEle.value
        ストローク矩形()
        inputEle.setAttribute('style', `display:none`)
    }
}

canvas.ondblclick = function(e){ 
    inputEle.setAttribute('style', `左:${e.clientX}px;上:${e.clientY}px;表示:block`);
    入力エレメント.focus();
}

キャンバス.onmousedown = 関数(e){ 
    /** ビューポートの左端とキャンバスの左端の間の距離と、マウスのクリック位置とキャンバスの左端の間の長さを取得します。この値は、相対移動中の定数値です*/
    デルタX = e.clientX - rect.x;
    deltaY=e.clientY - rect.y;
    マウスダウン = true
};  

定数 judgeW = cw-rect.width、 judgeH = ch-rect.height;

キャンバス.onmousemove = 関数(e){ 
    if(マウスダウン) {
        /** 四角形の左端とキャンバスの左端の間の長さを減算します*/
        dx = e.clientX-deltaX とします。 
        dy = e.clientY-deltaY とします。 
        dx < 0 の場合
            dx = 0;
        } そうでない場合 (dx > judgeW) {
            dx = 裁判官W;
        }
        dy < 0の場合{
            dy = 0;
        } そうでない場合(dy > judgeH) {
            dy = 裁判官H;
        }
        rect.x = dx;
        rect.y = dy; 
        ストローク矩形()
    }
};  
キャンバス.onmouseup = 関数(e){ 
    マウスダウン = false
};  

/** 指定された領域をクリアします */
関数clearRect() {
    ctx.clearRect(0, 0, cw, ch)
}

/** 四角形を描画します */
関数strokeRect() {
    クリア矩形()

    /** beginPath がここで呼び出されない場合、履歴矩形が再描画されます*/
    ctx.beginPath() 
    ctx.rect(rect.x、rect.y、rect.width、rect.height)
    ctx.stroke();
    // フォントの内容とキャンバス上の位置を設定します ctx.fillText(text, rect.x + 70, rect.y + 30);
}