第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「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要素の子要素に以下のように指定します（
2/2 jQuery Droppablesでドロップ処理も超簡単 [Javascript] All About
サンプル ドロップの簡単なサンプルを試してみます。いくつかのドラッグアイテムをドロップエリアにドロップすると、アイテムに書かれた価格がリストアップされて合計金額も表示されるというものです。 Droppablesも、引数のオプションでいろいろ設定できますので、最新のものはOptionsや UI/Droppablesあるいは、 デモ などでご参照ください。 ソースは次のとおり <style type="text/css"> .sel-items{ float : left } #sum { font-weight : 900 } #droptitle{ padding: 10px } .drag { width : 120px ; height : 50px ; padding : 10px ; font : 12px monospace; background-color : #B9FF04
![2/2 jQuery Droppablesでドロップ処理も超簡単 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
