HTMLを実装してコンテンツの位置をランダムにドラッグする2つの方法

テスト：Chrome V80.0.3987.122正常

2つの方法は次のとおりです。通常のラベルの位置をドラッグするか、キャンバスのテキストボックスの位置をドラッグします

デモアドレス

CSSコード

#range {position：relative;幅：600px;高さ：400px;マージン：10px;バックグラウンドカラー：RGB（133、246、250）;}。アイコン{position：absolute;高さ：100px;幅：100px;カーソル：移動;バックグラウンドカラー：＃ff9204;ユーザーセレクト：なし;}

HTMLコード

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

JSコード

const main = document.getElementById（ 'range'）; const icon = document.queryselector（ '。アイコン'）; let move = false; let deltaleft = 0、deltatop = 0; //ドラッグスタートイベントは移動要素アイコンにバインドされます。 deltaleft = e.clientx-e.target.offsetleft = e.clienty-e.offsettop;親要素に対する動きの位置を取得する*/ let dx = cx -deltaleft let dy = dy -deltatop/ **親要素範囲を超えて防止*/ if（dx <0）dx = 0 if（dx> 500）dx = 500 if（dy> 300）dy = 300 Icon.Setattribution `左：$ {dx} px; top：$ {dy} px`）}}）//ドラッグエンドトリガーは、エリア制御要素に配置されます。 console.log（ 'mouseup'）;}）

CSSコード

.cus-canvas {background：rgb（50、204、243）;}。input-ele {display：none;位置：修正;幅：180px;ボーダー：0;バックグラウンドカラー：#fff;}

HTMLコード

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

JSコード

実装の原則は、マウスの動きの位置を記録し、長方形のボックスとテキストコンテンツを常に再描画することです。

 Mousedown = false; let deltax = 0; let deltay = 0; let text = 'hello'const canvas = document.getElementbyid（' canvas '）; const ctx = canvas.getContext（' 2d '）; 50}/**テキストとボーダースタイルの設定*/ctx.font = 16px arial; ctx.fillstyle = #fff; /**テキストフィールドの中心がfilltextのxポイントにある場合、中心として設定*/ctx.textalign = 'center'; ctx.linewidth = '2'; ctx.strokestyle = '#fff'; strokerect（）const inputele = documentele.getElementbyid（ 'inputele'）; inputele.onkeyup = = = = == text = inputele.value strokerect（）inputele.setattribute（ 'style'、 `display：none`）}} canvas.ondblclick = function（e）{inputele.setattribute（ 'style'、` left：$ {e.clientx} px; top：$ {e.clianty} px; display：block`）; inputele.focus（）;} canvas.onmousedown = function（e）{ /**ビューポートの左境界とキャンバスの左境界と、マウスクリック位置の長さとキャンバスの左境界の間の距離を取得します。この値は、相対的な動き*/ deltax = e.clientx -rect.xの間に変更されていない値です。 deltay = e.clienty -Rect.Y; Mousedown = true}; const Judgew = cw-rect.width、judgh = ch-rect.height; canvas.onmousemove = function（e）{if（mousedown）{ / **縮小して、長方形の左境界とcanvasの左境界の間の長さを取得します。 dy = e.clienty-deltayとします。 if（dx <0）{dx = 0; } else if（dx> judgw）{dx = judww; } if（dy <0）{dy = 0; } else if（dy> judgh）{dy = judgh; } rect.x = dx; rect.y = dy; strokerect（）}}; canvas.onmouseup = function（e）{mousedown = false}; /**指定された領域をクリアします*/function clearRect（）{ctx.ClearRect（0、0、cw、ch）}/** draw rectangles*/function strokerect（）{clearRect（）/**ここでは歴史的長方形がredrawn*/ctx.beginpath（） rect.height）ctx.stroke（）; // canvas ctx.filltext（text、rect.x + 70、rect.y + 30）;}のフォントコンテンツと位置を設定します。

Githubとの通信へようこ​​そ

これは、HTMLのコンテンツポジションを自由に実装する2つの方法に関する記事です。より関連するHTMLについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！