JQuery ドラッグ アンド ドロップ プラグインの実装 code_jquery

多くのページ効果はこれらの場所を使用します。最後の手段として、練習して覚える必要があります。
JQuery に基づくこのシンプルなドラッグ アンド ドロップ プラグインについて話しましょう。
いつものように、最初にドラッグ アンド ドロップの原理と、そのようなものを作成する手順について話しましょう:
それでは、ドラッグ アンド ドロップとは何ですか? 名前を見ただけでわかりますが、何かを引きずります。 DOM に配置するということは、その位置を変更することを意味します。
問題は 2 つだけです: 1. ドラッグしているかどうかを確認するにはどうすればよいですか? 2. どこからドラッグするのか、どこからドラッグするのかを知るにはどうすればよいですか?
実は、これは難しいことではありません。結局のところ、どちらも熟練度が鍵となります。
js に切り替えて、ドラッグ効果を作成します。手順は次のとおりです。
1. 要素にイベントをキャプチャさせます (通常は、mousedown、mousemove、mouseup にすぎません)
2 . Mousedown の間、ドラッグの開始をマークし、要素とマウスの位置を取得します。
3. マウスの移動中に、マウスの新しい位置を継続的に取得し、対応する位置アルゴリズムを通じて要素を再配置します。
4. マウスアップ中にドラッグを終了します。 。 。その後、サイクルが再び始まります。
真ん中で、注意が必要な点が 1 つあります。ドラッグされた要素は、少なくとも相対的または絶対的に配置される必要があります。そうしないと、ドラッグは効果がありません。
OK、これ以上言葉もコードも真実も不要です。対応する説明がその中にあります:
ダウンロード:

コードをコピーします コードは次のとおりです:

=" ドラッグコンテナ" スタイル="位置:相対;左:10px;トップ:10px;境界線:1px 青の破線;幅:500px;高さ:500px;">