컨텐츠 위치를 무작위로 드래그하기 위해 HTML을 구현하는 두 가지 방법

테스트 : Chrome V80.0.3987.122 정상

두 가지 방법은 : 일반 레이블 위치를 드래그하거나 캔버스에서 텍스트 상자 위치를 드래그합니다.

데모 주소

CSS 코드

 #Range {위치 : 상대; 너비 : 600px; 높이 : 400px; 여백 : 10px; 배경색 : RGB (133, 246, 250);}. 아이콘 {위치 : 절대; 높이 : 100px; 너비 : 100px; 커서 : 이동; 배경색 : #FF9204; 사용자 선택 : 없음;}

HTML 코드

 <div id = 범위> <div class = icon> 100*100 </div> </div>

JS 코드

 const main = document.getElementById ( 'range'); const icon = document.querySelector ( '. icon'); let mak = false; let deltAlft = 0, deltatop = 0; // 드래그 시작 이벤트는 움직 인 요소 아이콘에 바인딩되어야합니다. AaddeventListener ( 'mousedown', function (e) {** @des*/deltalest가 그보다 반복됩니다. deltaleft = e.clientx-e.target.offsetleft; deltatop = e.clienty-e.target.offsettop; 부모 요소에 대한 움직임 위치*/ let dx = cx -deltaleft let dy = cy -deltatop/ ** 부모 요소 범위를 넘어서 방지*/ if (dx <0) dx = 0 if (dy <0) dy = 0 if (dy> 300) dy = 500 if (dy> 300) dy = 300 Icon.sytatttip ( 'Style', `왼쪽 : $ {dx} px; top : $ {dy} px`)}}) // 드래그 엔드 트리거는 영역 제어 요소 main.addeventListener ( 'mouseup', function (e) {move = false; console.log ( 'mouseup');})

CSS 코드

 .cus-canvas {배경 : rgb (50, 204, 243);}. input-ele {display : none; 위치 : 고정; 너비 : 180px; 국경 : 0; 배경색 : #fff;}

HTML 코드

 <div> <canvas id = canvas class = cus-canvas 너비 = 800 높이 = 600> </canvas> <입력 ID = inputele class = input-ele/> </div>

JS 코드

구현 원리는 마우스 움직임의 위치를 ​​기록하고 직사각형 상자와 텍스트 내용을 지속적으로 다시 그리기하는 것입니다.

 mousedown = false; deltax = 0; deltay = 0; let text = 'hello'Const canvas = document.getElementById ('canvas '); const ctx = canvas.getContext ('2d '); const cw = canvas.width, ch = canvas.height; const = x : 20, 20, 20, 20, : 50, : : 텍스트 및 테두리 스타일 설정*/ctx.font = 16px arial; ctx.fillstyle = #fff; /** 텍스트 필드의 중심이 fillText의 X Point*/ctx.textalign = 'center'; ctx.linewidth = '2'; ctx.strokestyle = '#fff'; strokerect () const inputele = document.getElementById ( 'inputele'); inputele.onkeyup = function (e) {if (e) {e) {e). 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; inputele.focus ();} 캔버스. 이 값은 상대 운동 중에 변경되지 않은 값입니다*/ deltax = e.clientx- rect.x; Deltay = E.Clienty- rect.y; Mousedown = true}; const judgew = cw-rect.width, judgeh = chrect.height; canvas.onmouseMove = function (e) {if (mousedown) { / ** 사각형의 왼쪽 경계와 캔버스의 왼쪽 경계 사이의 길이를 얻기 위해 { / ** 뺄셈* / let dx = e.clientx-deltax; 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 () {clareRect ()/** 시작 경로가 여기에서 호출되지 않으면 히스토리 사각형이 다시 작성됩니다. rect.height) ctx.stroke (); // 캔버스 ctx.fillText (텍스트, rect.x + 70, rect.y + 30)에서 글꼴 컨텐츠와 위치를 설정합니다.

Github와의 의사 소통에 오신 것을 환영합니다

이것은 HTML의 컨텐츠 위치를 마음대로 구현하는 두 가지 방법에 관한 기사입니다. 더 많은 관련 HTML은 Wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!