この記事では、簡単なドラッグ効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL データベース接続例外の概要 (収集する価値あり)
最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...
FRAME プロパティを使用して、表の境界線のスタイル タイプを制御します。基本的な構文<T...
私は今日、mybatis を学び、データベースに対していくつかの簡単な追加、削除、変更、クエリを実行...
この記事では、MySQL 8.0.15 winx64のインストールと設定方法を参考までに紹介します。...
目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...
この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...
目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...
この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...
目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...
Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...
実装のアイデア一番外側は大きな円(グラデーションカラー)グラデーションの円を覆うように、内側に半円を...
序文この記事は主にMySQLの主キー0と主キー自己排除制約の関係を紹介し、皆さんの参考と学習のために...
目次最初2番目Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画...
ユニアプリコード <テンプレート> <表示> <image v-for...
Webkit スクロールバー スタイルのリセット1. スクロールバーには、スクロールバー ボタンとト...