jQuery Droppablesでドロップ処理も超簡単ドラッグした要素をドロップして、いろいろな処理を行えるようにする jQuery UI の Droppables を紹介します。複雑な判定などを必要とするドロップ処理もjQueryなら極めて簡単に使えます。 前回は Draggables でDOM要素をドラッグしました。 今回は、その、ドラッグした要素をドロップしていろいろな処理を行えるようにする jQuery UI 、 Droppablesを紹介します。 前回見たとおり、jQueryではドラッグ処理を簡単に実装できますが、複雑な判定などを伴うドロップ処理も とても簡単に利用することができます。 jQuery Download jquey.js(-min.js) UI/Droppables Droppables デモ ダウンロード jquery.ui-1.0.zip (101 KB Dr
コンテンツ PHP入門 jQuery入門 Flash Flash(ActionScript)でゲーム作成入門 Flash(ActionScript)で様々なゲームを作ろう Flash(ActionScript)とPHPの連携入門 PHP(旧コンテンツ) PHPでファイルの読み書き・掲示板 PHPで日付・時刻の計算 PHPでアクセスカウンタ&解析 PHPでGDを使ってみよう PHPとPostgreSQLの連携入門 Java (旧コンテンツ) Javaでシューティングゲームを作ろう Perl (旧コンテンツ) CGI(Perl)の基本と掲示板作成 C/C++ C/C++言語とDXライブラリでゲーム作成入門 (旧コンテンツ)C言語とelで様々なゲームを作ろう jQuery simple plugins ひとりごと、ふたりごと(ブログパーツ) オリジナルソフトウェア その他未分類なモノ iOSアプ
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します(
今回のサンプルの基本的な情報 ここまででDraggables、Droppables、Selectablesの基本的な使い方が分かったと思いますので、いよいよここからは、応用編のサンプル解説をしていきます。もう一度サンプルを見てみましょう。 ■ サンプルの基本設計 このサンプルの基本設計は次のようになります。 ディレクトリが2つあり、それぞれを親要素とするファイルが3つずつぶら下がる ディレクトリをselectable()にする ファイルをdraggable()にする ただし、初期状態は'disable'にしておき、ファイルが選択されたときに'enable'にする ディレクトリをdroppable()にする ファイルがディレクトリにドロップされたら、そのファイルが、そのドロップされたディレクトリの子要素になるようにDOMの操作を行う ■ 複数要素のドラッグ ここで1つ難しいのは、複数ファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く