html随便拖拽內容部位的两种完成方法

检测:chrome v80.0.3987.122 一切正常

两种方法为:拖拽一般标识部位或拖拽canvas中的文字框部位

1. 完成电脑鼠标拖拽标识元素到随意部位

演试详细地址

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编码

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

js编码

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('style', `left:${dx}px;top:${dy}px`)
    }
})

// 拖拽完毕开启要放在,地区操纵元素上
main.addEventListener('mouseup', function (e) {
    move = false;
    console.log('mouseup');
})

2. canvas绘图文字框,并完成电脑鼠标将其拖拽挪动到随意部位

css 编码

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

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

html 编码

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

js编码

完成基本原理为纪录电脑鼠标挪动的部位,持续的重绘矩形框框和文字內容

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
}

/** 设定文本和边框款式 */
ctx.font="16px Arial";
ctx.fillStyle = "#fff"; 
/** 设定为 center 时,文本段的管理中心会在 fillText的 x 点 */
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左侧界的间距 再加 电脑鼠标点一下部位与canvas左侧界的长度,这个值是相对性挪动全过程中不会改变的值 */
    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
};  

/** 消除特定地区 */
function clearRect() {
    ctx.clearRect(0, 0, cw, ch)
}

/** 画矩形框 */
function strokeRect() {
    clearRect()

    /** 这里假如不启用 beginPath 历史时间的矩形框会再次被绘图 */
    ctx.beginPath() 
    ctx.rect(rect.x, rect.y, rect.width, rect.height)
    ctx.stroke();
    // 设定字体样式內容,和在画布上的部位
    ctx.fillText(text, rect.x + 70, rect.y + 30);
}

欢迎沟通交流 Github

到此这篇有关html随便拖拽內容部位的两种完成方法的文章内容就详细介绍到这了,更多有关html随便拖拽內容內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!