テスト: Chrome v80.0.3987.122 は正常です 方法は2つあります。通常のラベルの位置をドラッグするか、キャンバス内のテキストボックスの位置をドラッグします。 1. マウスドラッグでラベル要素を任意の位置に配置 デモアドレス CSSコード #範囲 { 位置: 相対的; 幅: 600ピクセル; 高さ: 400px; マージン: 10px; 背景色: rgb(133, 246, 250); } .アイコン { 位置: 絶対; 高さ: 100px; 幅: 100ピクセル; カーソル: 移動; 背景色: #ff9204; ユーザー選択: なし; } HTMLコード <div id="範囲"> <div class="icon">100*100</div> </div> jsコード const main = document.getElementById('range'); const icon = document.querySelector('.icon'); 移動 = false にします。 deltaLeft = 0、deltaTop = 0 とします。 // ドラッグ開始イベント。移動された要素にバインドされます。icon.addEventListener('mousedown', function (e) { /* * @des deltaLeft は移動中に変化しない値です*/ デルタ左 = e.clientX-e.target.offsetLeft; デルタTop = e.clientY-e.target.offsetTop; 移動 = true; }) // モバイルトリガーイベントはエリアコントロール要素に配置する必要があります main.addEventListener('mousemove', function (e) { (移動)の場合{ cx は、クライアント X の定数です。 定数 cy = e.clientY; /** 親要素からの相対位置を取得するために減算します*/ dx = cx - deltaLeftとします dy = cy - deltaTopとします /** 親要素の範囲を超えないようにする */ (dx < 0)の場合、dx = 0 (dy < 0)の場合dy = 0 (dx > 500)の場合、dx = 500 (dy > 300)の場合dy = 300 icon.setAttribute('style', `左:${dx}px;上:${dy}px`) } }) // ドラッグ終了トリガーはエリアコントロール要素に配置する必要があります main.addEventListener('mouseup', function (e) { 移動 = false; console.log('マウスアップ'); }) 2. キャンバスにテキストボックスを描き、マウスで任意の位置にドラッグします。 CSSコード .cus-canvas{ 背景: rgb(50, 204, 243); } .入力要素{ 表示: なし; 位置: 固定; 幅: 180ピクセル; 境界線: 0; 背景色: #fff; } HTMLコード <div> <canvas id="canvas" class="cus-canvas" width="800" height="600"></canvas> <input id="inputEle" class="input-ele"/> </div> jsコード 実装原理は、マウスの動きの位置を記録し、四角形とテキストコンテンツを継続的に再描画することです。 mouseDown を false にします。 deltaX = 0 とします。 deltaY = 0 とします。 テキストを「hello」にします 定数キャンバス = document.getElementById('キャンバス'); const ctx = canvas.getContext('2d'); 定数 cw = canvas.width、ch = canvas.height; 定数矩形 = { x: 20, y: 20, 幅: 150, 高さ: 50 } /** テキストと境界線のスタイルを設定する */ ctx.font="16px Arial"; ctx.fillStyle = "#fff"; /** 中央に設定すると、テキストセグメントの中心は fillText の x ポイントになります*/ ctx.textAlign = 'center'; ctx.lineWidth = '2'; ctx.strokeStyle = '#fff'; ストローク矩形() 定数 inputEle = document.getElementById('inputEle'); inputEle.onkeyup = 関数(e) { if(e.keyCode === 13) { テキスト = inputEle.value ストローク矩形() inputEle.setAttribute('style', `display:none`) } } canvas.ondblclick = function(e){ inputEle.setAttribute('style', `左:${e.clientX}px;上:${e.clientY}px;表示:block`); 入力エレメント.focus(); } キャンバス.onmousedown = 関数(e){ /** ビューポートの左端とキャンバスの左端の間の距離と、マウスのクリック位置とキャンバスの左端の間の長さを取得します。この値は、相対移動中の定数値です*/ デルタX = e.clientX - rect.x; deltaY=e.clientY - rect.y; マウスダウン = true }; 定数 judgeW = cw-rect.width、 judgeH = ch-rect.height; キャンバス.onmousemove = 関数(e){ if(マウスダウン) { /** 四角形の左端とキャンバスの左端の間の長さを減算します*/ dx = e.clientX-deltaX とします。 dy = e.clientY-deltaY とします。 dx < 0 の場合 dx = 0; } そうでない場合 (dx > judgeW) { dx = 裁判官W; } dy < 0の場合{ dy = 0; } そうでない場合(dy > judgeH) { dy = 裁判官H; } rect.x = dx; rect.y = dy; ストローク矩形() } }; キャンバス.onmouseup = 関数(e){ マウスダウン = false }; /** 指定された領域をクリアします */ 関数clearRect() { ctx.clearRect(0, 0, cw, ch) } /** 四角形を描画します */ 関数strokeRect() { クリア矩形() /** 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 でコンテンツを任意にドラッグする 2 つの方法についての説明は終わりです。HTML でコンテンツを任意にドラッグする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Node.js はクライアントリクエストデータ内の中国語文字化けの問題を解決します
>>: MySQL インポートおよびエクスポートのバックアップの詳細
1. vue uiでプロジェクトを作成する 2. 基本設定項目を選択する 3. プロジェクトを実行す...
1. スロークエリの用途は何ですか? long_query_time を超えて実行されるすべての S...
目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...
基本的なネットワーク構成Docker はイメージに基づいて複数のコンテナを「開く」ことができ、各コン...
<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...
1. サーバーの購入1. 私はAlibaba Cloudのサーバーを選択しました。学生向けで月額9...
ある日、内部結合を含む SQL ステートメントの実行速度はそれほど遅くはない (0.1 ~ 0.2)...
一時テーブルとメモリテーブルメモリ テーブルとは、メモリ エンジンを使用するテーブルを指します。テー...
この記事では、例を使用して、MySQL 5.7 で生成された列の使用方法を説明します。ご参考までに、...
このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...
パフォーマンス例えば: HTML: <div class="first"&...
最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...
序文この記事では、docker-compose と dockerfile を使用して、binlog ...
序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...
以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...