jQuery ドラッグ アンド ドロップ レイヤーの概要と例_JavaScript スキル

iDrag & iDialog の概要
機能:
iDialog.js は、jquery によって作成されたシンプルで使いやすいダイアログ ボックスに依存しています。同時に、次の方法でダイアログ ボックスの表示アニメーションを変更することもできます。 css3を追加します。 2 つのメソッドが提供されています:

•1. ドラッグ関数 iDrag() または $.drag();
•2. ダイアログ関数 iDialog() または $.dialog();
互換性: IE6、Firefox、Chrome、その他の主流ブラウザ (その他はテストのため一時的に利用できません)。また、IE6 は、最新のブラウザーの静的配置 (固定) およびオーバーレイ ドロップダウン コントロールもサポートできます。

段階的に強化されたエクスペリエンス:

IE ファミリが完全な機能を備えていることを保証するという前提の下、最新のブラウザーは影、角丸、スケール ショー、スーパー スケール ショー、右スライド ショー アニメーションなどの CSS3 拡張エクスペリエンスを適切に追加します。 , アニメーション CSSファイルを自分で修正して展開することもできます。

豊富なインターフェース:

1. $.drag() 関数は、ドラッグ範囲の設定、ドラッグ前のコールバック関数、ドラッグ処理、ドラッグ終了を提供します。 $.dialog() 関数は、CSS3 の表示効果、サイズ、位置、表示、閉じるインターフェイス、外部アクセス インターフェイスなどを提供します。詳細については、以下の API を参照してください。

クイック スタート:

•jquery.iDialog.js は jquery に依存して実装されているため、ロードする前に jQuery をロードする必要があります。
•dialog- theme= "default" は、default.css スタイル シートが自動的にロードされることを意味します。
•default.css はテーマ フォルダーに保存され、フォルダーと jquery.iDialog.js は同じディレクトリに存在する必要があります。
iDrag() の完全な使用例:
JS コード:

コードをコピー コードは次のとおりです。

var log = $('#drag-デモログ ');
iDrag({

ターゲット:'#drag-demo',

分:{x:0, y:0},

最大:{x:658, y:170}、

開始: function (pos) {

log.html('start:x=' pos.x ', y=' pos.y);

},

移動: function(pos){

log.html('move:left=' pos.x ', top=' pos.y);

},

終了: function(pos){

log.html('end:left=' pos.x ', top=' pos.y);

}

});

iDialog() の使用例:

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

iDialog( {
タイトル:'Hello World'、

id:'DemoDialog',

コンテンツ:'

皆さんこんにちは:
私は minDialog

',

ロック: true、

幅:500、

修正: true、

高さ:300

});