HTML ermöglicht das beliebige Ziehen der Inhaltsposition

Die beiden Möglichkeiten sind: Ziehen der normalen Beschriftungsposition oder Ziehen der Textfeldposition in der Leinwand

1. Implementieren Sie das Ziehen von Beschriftungen mit der Maus Element an beliebiger Position

CSS-Code

#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;
}

HTML-Code

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

js-Code

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

// 拖动开始事件，要绑定在被移动元素上
icon.addEventListener('mousedown', function (e) {
    /*
    * @des deltaLeft 即移动过程中不变的值
    */
    deltaLeft = e.clientX-e.target.offsetLeft;
    deltaTop = e.clientY-e.target.offsetTop;
    move = true;
})

// 移动触发事件要放在，区域控制元素上
main.addEventListener('mousemove', function (e) {
    if (move) {
        const cx = e.clientX;
        const cy = e.clientY;
        /** 相减即可得到相对于父元素移动的位置 */   
        let dx = cx - deltaLeft
        let dy = cy - deltaTop

        /** 防止超出父元素范围 */
        if (dx < 0) dx = 0
        if (dy < 0) dy = 0
        if (dx > 500) dx = 500
        if (dy > 300) dy = 300
        icon.setAttribute(&#39;style&#39;, `left:${dx}px;top:${dy}px`)
    }
})

// 拖动结束触发要放在，区域控制元素上
main.addEventListener(&#39;mouseup&#39;, function (e) {
    move = false;
    console.log(&#39;mouseup&#39;);
})

2 . Canvas zeichnet Textfelder und ermöglicht es der Maus, sie an eine beliebige Position zu ziehen und zu verschieben 🎜>Das Implementierungsprinzip besteht darin, die Position der Mausbewegung aufzuzeichnen und den rechteckigen Rahmen und Textinhalt kontinuierlich neu zu zeichnen

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

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

Empfohlenes Tutorial: „

HTML-Tutorial

“

Das obige ist der detaillierte Inhalt vonHTML ermöglicht das beliebige Ziehen der Inhaltsposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!