シンプルなドラッグ効果を実現する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でビューを作成する方法

推薦する

クリックイメージ反転効果を実現するJavaScript

最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...

HTML テーブルタグチュートリアル (12): 境界線スタイル属性 FRAME

FRAME プロパティを使用して、表の境界線のスタイル タイプを制御します。基本的な構文<T...

myBatis で条件を削除する際のスプライシング問題を解決する

私は今日、mybatis を学び、データベースに対していくつかの簡単な追加、削除、変更、クエリを実行...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル (Windows の場合)

この記事では、MySQL 8.0.15 winx64のインストールと設定方法を参考までに紹介します。...

JavaScriptのスタックとコピーの詳細な説明

目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

VUE でタブページを切り替える 4 つの方法

目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...

エンタープライズプロダクション MySQL 最適化入門

Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...

円形グラデーションプログレスバー効果を実現する CSS サンプルコード

実装のアイデア一番外側は大きな円(グラデーションカラー)グラデーションの円を覆うように、内側に半円を...

MySQL における主キーが 0 であることと主キーの自己選択制約の関係についての詳しい説明 (詳細)

序文この記事は主にMySQLの主キー0と主キー自己排除制約の関係を紹介し、皆さんの参考と学習のために...

ネイティブJSで実装されたギャラリー機能

目次最初2番目Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

CSSスクロールバースタイル設定の実装

Webkit スクロールバー スタイルのリセット1. スクロールバーには、スクロールバー ボタンとト...