要素のドラッグ アンド ドロップの使用方法の推奨例

ここ数日間、私は要素をドラッグするための追加機能に取り組んできました。これは、実際には、要素の初期位置を決定し、毎回一定の距離を移動することを意味します。要素をドラッグします。要素をグリッド内に整列させることができます。まずレンダリングを示し、その後詳細を説明し、gif を作成します。各要素が最小単位距離に従って移動することがわかります。そして毎回要素がグリッドに整列されます。まずはデモに基づいて考え方と詳細を説明し、デモコードは後ほど説明します。 1. 要素の各移動の最小単位 (デモでは 10 ピクセルと 10 ピクセル) を決定します。つまり、水平方向または垂直方向の移動はそれぞれ 10 ピクセルです。グリッド背景のレイヤーを配置すると、効果がわかりやすくなります (デモの各グリッドも 10px * 10px)。 2. 効果をより明確に確認するために、要素の幅と高さ (両方とも 10 ピクセルの倍数) とデフォルトの位置 (これも 10 ピクセルの倍数) が初期化されます。たとえば、要素の幅と高さは 50px * 50px、要素の初期位置は 0xp * 0px です。この利点は、最初にロードするときに、要素が整数の小さなグリッド (つまり、

1) を確実にカバーできることです。JavaScript は、要素をドラッグしてグリッドに位置合わせする (毎回固定距離を移動する) ことを実装します。

はじめに: ここ数日間、私は要素をドラッグするための追加機能に取り組んできました。これは実際には、要素の初期位置を決定し、いつ配置するかを決定することを意味します。要素をドラッグして、要素がグリッド内に配置されるように毎回移動します。次に、レンダリングを表示してから、各要素を詳細に説明して、gif を作成します。最小単位距離に従って移動し、そのたびに要素がグリッドに整列します

2. HTML5 のネイティブドラッグの実際の戦闘と分析 (3 つの dataTransfer オブジェクト)

: ネイティブ ドラッグは、dragstart、drag、dragend イベントを通じて実装されていますが、これは単なるドラッグ アンド ドロップですが、IE6 と IE7 ではまだいくつかの問題があり、データの交換を実現するためのデータ交換は実装されていません。 , IE5 では、イベント オブジェクトの属性である dataTransfer オブジェクトが導入されており、データはイベント オブジェクトのプロパティであるため、ドラッグされた要素を削除するために使用されます。

3. ドラッグ アンド ドロップ イベントのイベント ハンドラー内でのみアクセスできます。このオブジェクトのプロパティとメソッドを使用して完了します。 jquery_jquery に基づくマウス ドラッグ要素

はじめに: jquery に基づくマウス ドラッグ要素のコピーと書き込みの実装コード。必要な友達はそれを参照してください。

4.実装コード_jquery

はじめに: 「要素をドラッグしてサイズを変更する」は、実際には次のように「要素をドラッグする」と同じ原理です。 原理を理解して他の実践的なアプリケーションを拡張すると、アイデアは次のようになります。よりシンプルで明確です

5. jquery Web 要素のドラッグ アンド ドロップ プラグインの効果と実装_jquery

はじめに: 効果の説明: プラグインをロードした後、既存の CSS スタイルを使用します。 、Web ページ要素はウィンドウ内で自由にドラッグできます。元の位置の透明度およびドラッグ透明度の効果のオプションが設定されており、ページ上に複数のドラッグ可能な要素がある場合は、別の要素を読み込むことができます。 Windows ウィンドウの上部をクリックしたときの効果をシミュレートするための z-index を設定するためのプラグイン

6.

JS ドラッグ アンド ドロップ プラグインの実装手順_JavaScript スキル

。 はじめに: JS ドラッグ アンド ドロップ プラグインの実装を主に 6 つの側面から紹介します: 1. js ドラッグ アンド ドロップ プラグインの原理、2. 原理に基づいて実現される最も基本的な効果、3. コードの抽象化と最適化、4. 拡張機能: 効果的なドラッグ アンド ドロップ要素、5. パフォーマンスの最適化と概要、6. jquery プラグイン 、困っている友達はそれを参照できます

[関連Q&Aの推奨事項]:

javascript - JS で書かれた要素をドラッグするこの方法は、複数の要素に同時に適用すると機能するのはなぜですか?

javascript - JSのドラッグアンドドロップ要素の問題

ドラッグアンドドロップの並べ替えのHTML5実装、最良の効果は何ですか?

javascript - H5ドラッグアンドドロップはマウスの追従効果を変更できますか?変更するにはどうすればよいですか?

以上が要素のドラッグ アンド ドロップの使用方法の推奨例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。