> 웹 프론트엔드 > HTML 튜토리얼 > HTML은 마음대로 콘텐츠 위치 드래그를 실현합니다.

HTML은 마음대로 콘텐츠 위치 드래그를 실현합니다.

Guanhui
풀어 주다: 2020-07-20 13:06:24
앞으로
4658명이 탐색했습니다.

HTML은 마음대로 콘텐츠 위치 드래그를 실현합니다.

두 가지 방법은 일반 라벨 위치를 드래그하거나 캔버스에서 텍스트 상자 위치를 드래그하는 것입니다

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 코드를 사용하여 라벨 요소를 원하는 위치로 드래그하는 것을 실현하세요.

<p id="range">
    <p class="icon">100*100</p>
</p>
로그인 후 복사

js code

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

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

// 移动触发事件要放在,区域控制元素上
main.addEventListener(&#39;mousemove&#39;, 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는 텍스트 상자를 그리고 마우스를 드래그하여 원하는 위치로 이동하는 것을 실현합니다.

css code

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

.input-ele{
    display: none;
    position: fixed;
    width: 180px;
    border: 0;
    background-color: #fff;
}
로그인 후 복사

html code

<p>
    <canvas id="canvas" class="cus-canvas"  width="800" height="600"></canvas>
    <input id="inputEle" class="input-ele"/>
</p>
로그인 후 복사

js code

마우스 이동 위치를 기록하고 직사각형 프레임과 텍스트 내용을 지속적으로 다시 그립니다

let mouseDown = false;
let deltaX = 0;
let deltaY = 0;
let text = &#39;hello&#39;
const canvas = document.getElementById(&#39;canvas&#39;);
const ctx = canvas.getContext(&#39;2d&#39;);
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 = &#39;center&#39;;
ctx.lineWidth = &#39;2&#39;;
ctx.strokeStyle = &#39;#fff&#39;;

strokeRect()

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

canvas.ondblclick = function(e){ 
    inputEle.setAttribute(&#39;style&#39;, `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);
}
로그인 후 복사

추천 튜토리얼: "HTML Tutorial"

위 내용은 HTML은 마음대로 콘텐츠 위치 드래그를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:jb51.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿