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

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

テスト: 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 インポートおよびエクスポートのバックアップの詳細

推薦する

Vueモバイル端末の適応化問題の詳細説明

1. vue uiでプロジェクトを作成する 2. 基本設定項目を選択する 3. プロジェクトを実行す...

MySQL スロークエリ: スロークエリを有効にする

1. スロークエリの用途は何ですか? long_query_time を超えて実行されるすべての S...

Tomcat Nativeを使用してTomcat IO効率を向上させる方法の詳細な説明

目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...

Docker コンテナのネットワーク設定によく使われるコマンドの詳しい説明

基本的なネットワーク構成Docker はイメージに基づいて複数のコンテナを「開く」ことができ、各コン...

UTF8 でエンコードされた Web ページにファイルが含まれている場合の、ページの前の空白行の解決方法

<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...

独自のサーバーを素早く構築する方法の詳細なチュートリアル(Java 環境)

1. サーバーの購入1. 私はAlibaba Cloudのサーバーを選択しました。学生向けで月額9...

MySql SQL最適化のヒントの共有

ある日、内部結合を含む SQL ステートメントの実行速度はそれほど遅くはない (0.1 ~ 0.2)...

Mysql の一時テーブルとパーティションテーブルの違いの詳細な説明

一時テーブルとメモリテーブルメモリ テーブルとは、メモリ エンジンを使用するテーブルを指します。テー...

MySQL 5.7 生成列の使用例の分析

この記事では、例を使用して、MySQL 5.7 で生成された列の使用方法を説明します。ご参考までに、...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

CSSの高さの崩壊問題についての簡単な説明

パフォーマンス例えば: HTML: <div class="first"&...

ラベルタグの使用時に発生する問題の分析と解決策

最近何かをするときにラベル タグを使用しました。以前はラベル タグをほとんど使用していなかったため、...

DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明

序文この記事では、docker-compose と dockerfile を使用して、binlog ...

MySQLのメモリ使用量を表示する方法の詳細な説明

序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...

MySQL 検査スクリプト (必読)

以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...