monaca開発メモ4

スマホでよくある、タッチ＆スライドによる、リストの並び替えを実現する方法。

jQuery UIのsortableを使います。
まずは、コンポーネントを追加します。

「設定」から「JS/CSSコンポーネントの追加と削除...」を開き、jqueryで検索して、「jquery-ui」を「追加」します。

• ローダーの設定では、jquery-ui.js（又は、jquery-ui.min.js）にチェックをして、ローダーに追加します。

スクリプトは以下のように記述します。

app.controller('listCtrl',function($scope, MyService){
        ：
    $(function(){
        $("#list").sortable();
    });
});

これで、ドラッグ＆ドロップによる並び替えは出来るのですが、タッチデバイスでは動きません。
「jQuery UI Touch Punch」というライブラリが必要のようです。
http://kachibito.net/web-design/jquery-ui-touch-punch.html

下のURLを開き、「Production」を右クリックして、ファイルを保存します。
保存された、jsファイルをプロジェクトに取り込んで、index.htmlで読み込みます。
http://touchpunch.furf.com/

www直下にファイルを置いた場合、以下のようになります。

<script src="jquery.ui.touch-punch.min.js"></script>