OnsenUIでのリストを削除したい

###前提・実現したいこと
現状、OnsenUIにて、indexedDBから取得したデータをons-list、ons-list-itemにて動的なリストを作成しました。ここまでは上手くいきました。
次に、表示されたリストを左スワイプにて削除する機能を作りたいと考えています。
###発生している問題・エラーメッセージ

色々ネットで調べているのですが、メソッドやプロパティが存在しているのかが分からず、実現方法が分かりません。。もしかすると左スワイプ自体が出来ないのかもしれませんが、どちらにしても表示されたリストから対象を選択して削除する事ができれば問題ありません。宜しくお願いします。

###該当のソースコード

【html】
<ons-page>
    <section style="padding: 8px 8px 0px">
        <ons-button modifier="left" onclick="createList();">
        結果表示
        </ons-button>
    </section>

    <section style="padding:8px">
        <ons-list id="list" onclick="listClick(event);">
        </ons-list>
    </section>
</ons-page>



【javaScript】※DB関連のソースは割愛しています。
function createList(){
    var list = document.getElementById('list');
    list.innerHTML = '';
    var transaction = idb.transaction(["DBdata"],'readonly');
    var store = transaction.objectStore("DBdata");
    var range = IDBKeyRange.lowerBound(0);
    var request = store.openCursor(range);
    request.onsuccess = function(event){
        var cur = event.target.result;
        if(!cur) return;
        var onsListItem = document.createElement("ons-list-item");
        onsListItem.setAttribute('modifier', 'tappable chevron');
 
        onsListItem.innerHTML =
            cur.value.USER_NAME

        list.appendChild(onsListItem);

        cur.continue();
    };
    request.onerror = function(event){
        alert("ERROR: " + event);
    }    
}

###試したこと
ネットで検索

###補足情報(言語/FW/ツール等のバージョンなど)
HTML5,javaScript

行動規範の内容に同意します

回答1件

ベストアンサー

<ons-gesture-detector> というものがあります。

こちらでスワイプイベントを取得できます。
ons-gesture-detector

投稿2017/05/18 06:50

namimon

総合スコア726

kaoru777

2017/05/19 07:20

ご返答有り難うございます。お手数ですが、追加で質問させてください。教えて頂いた<ons-gesture-detector>をネットで調べた事で、ジェスチャー認識にHammer.jsというものを使う必要があるのは分かったのですが、Angularを利用せずに、Hammer.jsを使う方法が分かりません。どのように記載すればいいのでしょうか？（Angularはまだ勉強していません。。）ちなみに、<ons-gesture-detector>を利用するための条件（Angularが前提など）はあるのでしょうか？

namimon

2017/05/19 08:09

onsenuiコンポーネントを読んでいれば、hammer.jsはデフォルトで読まれていると思います。私はonsen ui v2 js minimumのプロジェクトで、Angularを使っていませんが、<ons-gesture-detector>は問題なく使えています。 www/components/loader.js の中にhammerに関する記述があれば、問題ないと思います。

kaoru777

2017/05/22 09:15

返信が遅くなりすみません。やはり、上手くいかず難航しています。。私も新規にonsen ui v2 js minimunのプロジェクトを作成し、シンプルに以下の記載をしました・・・が、反応せずです。。ちなみに、loader.jsにはhammerの記載らしき部分はありませんでしたが、onsenui.jsにはhammerの記載らしき部分（ons-gesture-detectorの記載）がありました。以下の記載方法で問題無さそうかだけ教えて頂けたら幸いです。特に問題なければ、他に問題があるのだと思いますので、自分でなんとか調べてみます。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="../components/loader.js"></script> <script src="../lib/onsenui/js/onsenui.js"></script> <script src="../lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="../components/loader.css"> <link rel="stylesheet" href="../lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="../lib/onsenui/css/onsen-css-components.css"> <script src="data.js"></script> <script src="main5.js"></script> <script> $(document).on('swipeleft', '#detect-area', function() { alert("左スワイプが検知されました"); }) </script> </head> <body style="margin:8px;"> <ons-gesture-detector> <div id="detect-area" style="width: 100px; height: 100px;"> ここをスワイプ </div> </ons-gesture-detector> </body> </html>

namimon

2017/05/22 09:34

１、jqueryは読まれていますか？２、 ons.ready( function (){ } ); の中に、alert()を入れてみてください。

kaoru777

2017/05/23 11:14

jqueryを読み込む事で左スワイプでアラートが表示されるようになりました！！ご丁寧に対応頂き、本当に有り難うございました。（ちなみに参考までにですが、まだjquetyをよく分かっていませんが、２番のons.readyの記述は無くても何故か動きました）

行動規範の内容に同意します