JavaScript は Firefox、IE7 をサポート ページ レイアウトのドラッグ アンド ドロップ効果コード_JavaScript スキル

JavaScript ドラッグ JavaScript Google IG ドラッグ デモ、非常に優れたドラッグ、F2Blog の新しいテーマのバックグラウンド モジュール設定で使用する準備ができています。


間のドラッグ効果のページ効果デモ アドレス: http ://img.jb51.net/online/tuozhuai/google_drag.htm
拡張バージョン効果のデモのアドレス: http://img.jb51.net/online/tuozhuai/google_drag2. >ドラッグ アンド ドロップの原理:
ドラッグ アンド ドロップの基本については、この記事を参照してください。これは非常に優れています。

実際、原理は非常に単純で、onmousedown、onmousemove、onmouseup の 3 つのイベントをバインドすることです。

要素の座標をマウスクリック時(onmousedown)の座標に設定し、位置を絶対座標に設定します。
マウスの移動時に要素の座標を変更します (onmousemove)。
マウスがポップアップしたときにバインドされたイベント (onmouseup) をキャンセルし、その後の操作を実行します。
javascript ドラッグ アンド ドロップ 以下は、Google のパーソナライズされたホームページを模倣したドラッグ アンド ドロップ効果に関するデモです (プロトタイプを含める必要があります)。完全なダウンロード パッケージ:
Google Drag.rar
(19.82 KB、ダウンロード: 247 回) 合計 4 つのファイルがあります:

google_drag.html
プロトタイプ。 js
ユニバーサル ドラッグ アンド ドロップ関数 drag.js
Google のパーソナライズされたホームページのドラッグ アンド ドロップを模倣します google_drag.js
google_drag.html の最後の数行に初期化ドラッグ関数があります

ウィンドウ.onload = function(){initDrag();}

を直接記述する場合は、

window.onload = initDrag(); のように記述する必要があります。これは、IE エラー: 未実装
として報告されます。他のコードでは、わずか数行のコメントでソース コードを直接表示できます。実際、JavaScript を使用して 15 個の div を描画し、その
クラスをドラッグ_div に設定し (その後、className を使用して要素をドラッグできるかどうかを判断します)、次にドラッグ可能な部分の ID を 要素 最後に _h を追加します (自分をドラッグ部分に設定することもできます)
drag.js は、より一般的なドラッグ関数です。これには、start_Drag、when_Drag、end_Drag、
after_Drag の 4 つの最も単純な関数が含まれています。これら 4 つの関数は、最も基本的なドラッグ アンド ドロップ関数のみを実装し、他の関数を実装するために、これらの関数を後で変更またはオーバーライドできます。
google_drag.js は、Google のパーソナライズされたホームページのドラッグ アンド ドロップ効果を模倣する関数です。上記4つの機能を網羅しており、比較的
高度な効果を実現します。
ドラッグ アンド ドロップは実際には比較的簡単です。ドラッグ アンド ドロップを実装した後、Ajax を使用してドラッグした位置を転送し、サーバー側の値を変更する必要があります。
このように、要素は、ユーザーが次回アクセスするときも変更されません。エフェクトの実装は非常に簡単で、重要なのは、それを既存のプロジェクトに統合してユーザー エクスペリエンスを向上させる方法です。
このデモには、インターネットからの参照コードがいくつか含まれています。
インターネット上にはこの例がたくさんありますが、これほど効率的ではないと感じます。たとえば、すべての要素の位置を
に設定し、各要素の上部と左側を直接変更して効果を表示する例があります。その場合、それはあまり汎用性が高くないと感じます。エフェクトを
に変更したいのですが、何度もドラッグ＆ドロップして各要素間の位置を記録するのはかなり面倒です。この例では、要素
の位置を記録するには、ドラッグされた要素の ID と、ドラッグ完了後にドラッグされた要素を記録し、それを変更のためにサーバーに渡すだけです
。

更新 2007-01-26 1:22
拡張バージョンを追加しました。効果についてはデモを参照してください。実際には、左上の大きなブロックに要素が 1 つだけ含まれるようにするための関数が追加されています。
が複数ある場合、要素が存在しない場合は、次の要素が下の最初の列に押し込まれます。 , 下の最初の列からプッシュされます。 列の最初の要素を取り出して、左上の
の大きなブロックに入れます。 下の最初の列に要素がない場合は、2 番目の要素を見つけてください。 3番目の列。