這篇文章運(yùn)用簡單易懂的例子給大家介紹HTML 如何實(shí)現(xiàn)隨意拖動(dòng)內(nèi)容位置，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)主營邯鄲網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),邯鄲h5微信小程序定制開發(fā)搭建,邯鄲網(wǎng)站營銷推廣歡迎邯鄲等地區(qū)企業(yè)咨詢

兩種方式為：拖拽普通標(biāo)簽位置或拖拽canvas中的文本框位置

1. 實(shí)現(xiàn)鼠標(biāo)拖動(dòng)標(biāo)簽元素到任意位置

css 代碼

#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代碼

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

js代碼

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

// 拖動(dòng)開始事件，要綁定在被移動(dòng)元素上
icon.addEventListener('mousedown', function (e) {
    /*
    * @des deltaLeft 即移動(dòng)過程中不變的值
    */
    deltaLeft = e.clientX-e.target.offsetLeft;
    deltaTop = e.clientY-e.target.offsetTop;
    move = true;
})

// 移動(dòng)觸發(fā)事件要放在，區(qū)域控制元素上
main.addEventListener('mousemove', function (e) {
    if (move) {
        const cx = e.clientX;
        const cy = e.clientY;
        /** 相減即可得到相對于父元素移動(dòng)的位置 */   
        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('style', `left:${dx}px;top:${dy}px`)
    }
})

// 拖動(dòng)結(jié)束觸發(fā)要放在，區(qū)域控制元素上
main.addEventListener('mouseup', function (e) {
    move = false;
    console.log('mouseup');
})

2. canvas繪制文本框，并實(shí)現(xiàn)鼠標(biāo)將其拖拽移動(dòng)到任意位置

css 代碼

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

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

html 代碼

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

js代碼

實(shí)現(xiàn)原理為記錄鼠標(biāo)移動(dòng)的位置，不斷的重繪矩形框和文本內(nèi)容

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
}

/** 設(shè)置文字和邊框樣式 */
ctx.font="16px Arial";
ctx.fillStyle = "#fff"; 
/** 設(shè)置為 center 時(shí)，文字段的中心會(huì)在 fillText的 x 點(diǎn) */
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){ 
    /** 獲取視口左邊界與canvas左邊界的距離 加上 鼠標(biāo)點(diǎn)擊位置與canvas左邊界的長度，這個(gè)值是相對移動(dòng)過程中不變的值 */
    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) {
        /** 相減即可獲得矩形左邊界與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
};  

/** 清除指定區(qū)域 */
function clearRect() {
    ctx.clearRect(0, 0, cw, ch)
}

/** 畫矩形 */
function strokeRect() {
    clearRect()

    /** 這里如果不調(diào)用 beginPath 歷史的矩形會(huì)重新被繪制 */
    ctx.beginPath() 
    ctx.rect(rect.x, rect.y, rect.width, rect.height)
    ctx.stroke();
    // 設(shè)置字體內(nèi)容，以及在畫布上的位置
    ctx.fillText(text, rect.x + 70, rect.y + 30);
}

關(guān)于HTML 如何實(shí)現(xiàn)隨意拖動(dòng)內(nèi)容位置就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前名稱：HTML如何實(shí)現(xiàn)隨意拖動(dòng)內(nèi)容位置
瀏覽路徑：http://m.newbst.com/article8/jicgip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、網(wǎng)站收錄、動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)