この記事では、簡単なドラッグ効果を実現するための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 データベース接続例外の概要 (収集する価値あり)
序文これまで遭遇したデータベースのデッドロックはすべて、バッチ更新中のロック順序の不一致が原因でした...
私の友人の多くは、127.0.0.1 と localhost の違いがわからず、問題に遭遇するかもし...
誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...
<br />原文: http://andymao.com/andy/post/104.h...
<br />元のアドレス: http://andymao.com/andy/post/8...
1. Python 3をダウンロードする https://www.python.org/ftp/py...
背景: 開発プロセスでは、現在の月、現在の日、現在の時間、今後数日など、時間を判断条件としてデータを...
元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...
前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...
今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...
次のように: docker run -d -p 5000:23 -p 5001:22 --name ...
tar バックアップ システム sudo tar cvpzf backup.tgz --exclud...
プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...
この記事では、ページ印刷の自動ページングを実現するためのVueの具体的なコードを例として紹介します。...
第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...