シンプルなドラッグ効果を実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません: