htmlのドラッグ＆ドロップによるコンテンツ位置の2つの実装方法

#range {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 10px;
    background-color: rgb(133, 246, 250);
}

.icon {
    position: absolute;
    height: 100px;
    width: 100px;
    cursor: move;
    background-color: #ff9204;
    user-select: none;
}

<div id="range">
    <div class="icon">100*100</div>
</div>

const main = document.getElementById('range');
const icon = document.querySelector('.icon');
let move = false;
let deltaLeft = 0, deltaTop = 0;

// Drag start event, to be bound to the element being moved
icon.addEventListener('mousedown', function (e) {
    /*
    * @des deltaLeft i.e. the value that remains unchanged during the move
    */
    deltaLeft = e.clientX-e.target.offsetLeft;
    deltaTop = e.clientY-e.target.offsetTop;
    move = true;
})

// The move trigger event should be placed on the area control element
main.addEventListener('mousemove', function (e) {
    if (move) {
        const cx = e.clientX;
        const cy = e.clientY;
        /* Subtract to get the position of the move relative to the parent element */   
        let dx = cx - deltaLeft
        let dy = cy - deltaTop

        /* prevent the parent element from going out of range */
        if (dx < 0) dx = 0
        if (dy < 0) dy = 0
        if (dx > 500) dx = 500
        if (dy > 300) dy = 300
        icon.setAttribute('style', `left:${dx}px;top:${dy}px`)
    }
})

// The drag end trigger should be placed on the area control element
main.addEventListener('mouseup', function (e) {
    move = false;
    console.log('mouseup');
})

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

.input-ele{
    display: none;
    position: fixed;
    width: 180px;
    border: 0;
    background-color: #fff;
}

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

let mouseDown = false;
let deltaX = 0;
let deltaY = 0;
let text = 'hello'
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const cw = canvas.width, ch = canvas.height;
const rect = {
    x: 20,
    y: 20,
    width: 150,
    height: 50
}

/* Set text and border styles */
ctx.font = "16px Arial";
ctx.fillStyle = "#fff"; 
/* When set to center, the text segment will be centered at the x point of fillText */
ctx.textAlign = 'center';
ctx.lineWidth = '2';
ctx.strokeStyle = '#fff';

strokeRect()

const inputEle = document.getElementById('inputEle');
inputEle.onkeyup = function(e) {
    if(e.keyCode === 13) {
        text = inputEle.value
        strokeRect()
        inputEle.setAttribute('style', `display:none`)
    }
}

canvas.ondblclick = function(e){ 
    inputEle.setAttribute('style', `left:${e.clientX}px;top:${e.clientY}px;display:block`);
    inputEle.focus();
}

canvas.onmousedown = function(e){ 
    /* Get the distance between the left border of the viewport and the left border of the canvas plus the length between the mouse click position and the left border of the canvas, this value is constant during relative movement */
    deltaX=e.clientX - rect.x;
    deltaY = e.clientY - rect.y;
    mouseDown = true
};  

const judgeW = cw-rect.width, judgeH = ch-rect.height;

canvas.onmousemove = function(e){ 
    if(mouseDown) {
        /* Subtract to get the length between the left border of the rectangle and the left border of the canvas */
        let dx = e.clientX-deltaX; 
        let dy = e.clientY-deltaY; 
        if(dx < 0) {
            dx = 0;
        } else if (dx > judgeW) {
            dx = judgeW;
        }
        if(dy < 0) {
            dy = 0;
        } else if(dy > judgeH) {
            dy = judgeH;
        }
        rect.x = dx;
        rect.y = dy; 
        strokeRect()
    }
};  
canvas.onmouseup = function(e){ 
    mouseDown = false
};  

/** Clear the specified area */
function clearRect() {
    ctx.clearRect(0, 0, cw, ch)
}

/* Draw a rectangle */
function strokeRect() {
    clearRect() { clearRect()

    /* If beginPath is not called here, the history rectangle will be redrawn */
    ctx.beginPath() 
    ctx.rect(rect.x, rect.y, rect.width, rect.height)
    ctx.stroke();
    // Set the content of the font, and its position on the canvas
    ctx.fillText(text, rect.x + 70, rect.y + 30);
}