ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryを使用してドラッグアンドドロップ効果を実現する方法

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

WBOY
WBOYオリジナル
2021-11-22 15:09:572060ブラウズ

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

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

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

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

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

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

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

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

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

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

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。