jqueryを使用してドラッグアンドドロップ効果を実現する方法

jquery を使用してドラッグ効果を実現する方法: 1. "$("#element id value")" ステートメントを使用して、指定された id 値に従って要素ノードを取得します。2. ドラッグ可能() ) 要素ノードにドラッグを追加するメソッド その効果、構文は「element node.draggable();」です。

このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、Dell G3 コンピューター。

jquery を使用してドラッグ アンド ドロップ効果を実現する方法

#1. jquery と jquery-ui を HTML インターフェースに導入します。 jquery-ui. よりも前に置くと、目的の効果が得られません。 div を div にネストし、ID を追加します。 fとsのIDをdivに追加しました。 f のスタイル効果を設定し、それに境界線を追加します。

s のスタイルを再度設定します。サイズは前の f を超えてはならず、背景色を赤に設定します。

#2. 基本的なスタイルが書かれています。次に、赤い div にドラッグ効果を追加し始めました。 ("#s") を使用して赤い div を取得し、ドラッグ可能なメソッドを呼び出して、取得した赤い div にドラッグ効果を追加します。

この時点で、赤い div をマウスでドラッグできます。次に、それを黒い境界線に移動します。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

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