コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > ドラッグ要素のネイティブ JavaScript 実装サンプル コード_JavaScript スキル

ドラッグ要素のネイティブ JavaScript 実装サンプル コード_JavaScript スキル

WBOY
リリース： 2016-05-16 16:38:16
オリジナル
1166 人が閲覧しました

この記事では、要素のドラッグを実装するためのネイティブ JavaScript を紹介します。

もの:

1. まず、ドラッグされた要素のレイアウト属性を変更します。キーは「position:absolue」です。

2. マウスイベント「mousedown」、「mouseup」をキャプチャします。

3. 「mousedown」がトリガーされると、要素 _x、_y に現在のマウスの相対位置を記録します。

4. 次に、「mousemove」イベントを処理し、要素の上部と左の属性を変更して要素を移動します。

5. 「マウスアップ」時間がトリガーされたら、ドラッグを終了します。

同時に、コードのカプセル化とブラウザの互換性も考慮する必要があります。コードは次のとおりです。

関連ラベル：
ネイティブjs
ソース：php.cn
前の記事：jQuery_jquery の使用に影響を与える 14 の側面 次の記事：textメソッドを使用してHTML要素のテキスト情報を取得する例_javascriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
Ajax を使用したコンテンツの生成 - ID までスクロールできない ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロー...
から 2024-04-04 09:29:39
0
1
397
質問は同じですが、タイトルは次のように書き換えられています: Javascript のランダム関数が有効な応答を生成できません JSとHTMLを使用して簡単な乱数生成ゲームを作成しています。このゲームでは乱数の最小値と最大値を設定できます。しかし、変数を設定して結果を記録すると、ありえない数値が表示されます...
から 2024-04-03 22:03:14
0
1
275
ReactJs: マップ関数を使用した後に親配列が更新される 基本的に親配列から抽出された新しいキーを配列に挿入しようとしています。抽出された配列に新しいキーを挿入するだけでストア内のメイン配列が変更される理由がわかりません。これは、カスタム...
から 2024-04-03 20:04:17
0
1
352
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート