シンプルなドラッグ効果を実現するJavaScript

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

まず実装の効果を見てみましょう。

アイデア:マウスの押下、移動、リリースの3つのイベントを使用します

まずボックスを作成し、CSSスタイルを設定します

HTML:

//html
<div>
    <p>私は青い箱です</p>
</div>

CS: ...

CS
*{マージン: 0;パディング: 0;}
        div{
            幅: 100ピクセル;
            高さ: 100px;
            背景色: コーンフラワーブルー;
            位置: 絶対;
        }
        p{
            幅: 100ピクセル;
            高さ: 100px;
            行の高さ: 100px;
            フォントサイズ: 10px;
            色: #fff;
            テキスト配置: 中央;
            遷移: すべて .5 秒;
        }
        p:ホバー{
            変換: translateY(-5px);
            遷移: すべて .5 秒;
            ボックスシャドウ: 10px 10px 5px グレー;
}

次にJSで対応するメソッドを設定します

var div = document.querySelector('div');
        var p = document.querySelector('p');
        //まず変数xとyを定義して初期化します
        var x = 0;
        変数 y = 0;
        // var i = 3;
        var TorF = false;
        //ボックス内のテキストは選択できません div.onselectstart = function (e) {
            false を返します。
        }
        div.addEventListener('mousedown',function(e){
            // クライアント: マウスボタンが押されたときのマウスポインターの座標を出力します。x = e.clientX;
            y = e.clientY;
            // 形式: obj.offsetLeft: 左と上のオフセットを取得します // 特記事項: このプロパティは読み取り専用であり、値を割り当てることはできません。
            // 現在の要素と親要素 (本体) の左側の間の距離を返します。// ここで、l と t はグローバル変数を宣言するのではなく、グローバル オブジェクトのプロパティを作成します。
            l = div.offsetLeft;
            t = div.offsetTop;
            // マウス設定の移動矢印 div.style.cursor = 'move';
            p.innerHTML = '圧迫されました^_^';
            TorF = true;
        });
        // 画面全体が移動イベントをトリガーしたとき document.addEventListener('mousemove',function(e){
            // falseの場合は関数の実行を終了し、関数の値を返します。if (Torf == false) {
                戻る; 
            }
            // この関数でローカル変数を定義します var twox = e.clientX;
            var twoy = e.clientY;
            // 取得したマウス ポインターの座標を使用します - (マウス ポインターの座標 - オフセット) = マウス ドラッグの実際の位置 // 元の取得には単位がないため、px 単位を最後に追加する必要があります var twol = twox - (xl);
            var twot = twoy - (yt); 
            div.style.left = twol+'px';
            div.style.top = twot+'px';
            p.innerHTML = '私は引きずられています-.-';
        });
        div.addEventListener('mouseup',function(){
            // キーボードを放したときにマウス移動イベントを停止します TorF = false;
            // マウスはデフォルトのスタイルを復元します div.style.cursor = 'default';
            p.innerHTML = 'QAQ で返送されました';
 })

知らせ:

1. ボックスの位置を制御したい場合は、ボックスに位置を追加する必要があります。そうしないと、ボックスは移動しません。

2. offsetLeft プロパティは読み取り専用であり、値を割り当てることはできません。

3. マウス位置の計算: マウスポインターの座標 - (マウスポインターの座標 - オフセット) = 実際のマウスドラッグ位置

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript における一般的な配列操作
  • JavaScript の async と await のシンプルで詳細な学習
  • 古典的なスネークゲームの JavaScript 実装
  • 組み込みオブジェクトに関するJavascriptの基礎
  • JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明
  • Python コルーチンと JavaScript コルーチンの比較
  • マウスの尾行効果を実現する JavaScript
  • JavaScript配列重複排除の詳細な説明
  • 航空機戦争ゲームを実装するためのJavaScript
  • JavaScript setinterval 1秒遅延ソリューション
  • JavaScriptアップロードファイル制限パラメータケースの詳細な説明
  • JavaScript 変数の昇格についての簡単な説明
  • JavaScriptイベント実行メカニズムの深い理解
  • プロジェクトに必須の 8 つの JavaScript コード スニペット

<<:  MySQL データベース接続例外の概要 (収集する価値あり)

>>:  MySQLでビューを作成する方法

推薦する

MySQL デッドロックのトラブルシューティング プロセスの完全な記録

序文これまで遭遇したデータベースのデッドロックはすべて、バッチ更新中のロック順序の不一致が原因でした...

MySQLデータベースホスト127.0.0.1とlocalhostの違い

私の友人の多くは、127.0.0.1 と localhost の違いがわからず、問題に遭遇するかもし...

ubuntu20.04 LTS システムのデフォルト ソース ソース リスト ファイルの変更

誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...

HTML チュートリアル: 定義リスト

<br />原文: http://andymao.com/andy/post/104.h...

ウェブページのグリッドデザインを考える

<br />元のアドレス: http://andymao.com/andy/post/8...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

MySQLで時間を判定条件として使用する方法

背景: 開発プロセスでは、現在の月、現在の日、現在の時間、今後数日など、時間を判断条件としてデータを...

MySQL監視グループレプリケーションについて簡単に説明します

元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...

Docker はキューとタスクのスケジューリングを実現するために Laravel アプリケーションをデプロイします

前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...

MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)

今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...

Dockerは複数のポートマッピングコマンドを有効にします

次のように: docker run -d -p 5000:23 -p 5001:22 --name ...

Linux システムをバックアップする docker コマンドの詳細な説明

tar バックアップ システム sudo tar cvpzf backup.tgz --exclud...

CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...

Vue ページ印刷で自動ページングを実装する 2 つの方法

この記事では、ページ印刷の自動ページングを実現するためのVueの具体的なコードを例として紹介します。...

ウェブページの読み込み速度を上げる6つのヒント

第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...