こんにちは、廣川です。
今回はJQueryでのドラッグ&ドロップについてです。
JQueryUIというプロジェクトには、draggableとdroppableというライブラリがあります。
また、それらを使用するのに必要なファイルがいくつかあるので、それらを先に読み込ませます。
<script type="text/javascript" src="js/libs/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="js/libs/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="js/libs/ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="js/libs/ui/jquery.ui.sortable.js"></script> <script type="text/javascript" src="js/libs/ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="js/libs/ui/jquery.ui.droppable.js"></script>
ちなみに、JQueryUIのサイトからカスタムしてダウンロードすると、必要な処理のみがまとまったJavaScriptファイルを取得することができます。
上記のように、何行にもまたがって書きたくないけれど余計なファイルを読み込ませたくない、という場合は、カスタムダウンロードすることをおすすめします。
以下は、ドラッグ&ドロップで、RSSのカテゴリを変更させる記述です。
var dropStop = function (eObj, proObj){ // カテゴリID、RSSIDの取得(※汚い実装。ごめんなさい) var categoryId = eObj.target.attributes[1].nodeValue.replace("category_id_",""), rssId = proObj.helper.valueOf().context.id.replace("rss_id_",""), rssData = rssStore.read(parseInt(rssId))[0], category = categoryStore.read(parseInt(categoryId)); rssData.category = category[0]; // AeroGearで通信を行う var options = { id: sessionStorage.getItem("userId"), success:function(){ rssStore.save(rssData); // 描画の更新 updateDisplay(); }}; rssPipe.save(rssData, options); }; // dragAreaにある、クラスがdragTargetのspanを、反転不可にする $( '#dragArea' ).find('span.dragTarget').disableSelection(); // クラスがdropTargetのspanを、ドロップ出来るようにする $( 'span.dropTarget').droppable({ // ドロップしたオブジェクトの受け入れ先 accept:'span.dragTarget', // ドロップが終わった時に呼び出す処理 drop:dropStop });
とりあえず次で最後。
最後は「OpenIDについて」です。