Swipe on Ons-List via Ons-GestureDetector



  • So, there was a question regarding implementing swipe to delete on the ons-list elements. I started working on this as I was curious and I have swipe working, but I am having issues getting the id of the element to delete. Here is a mix of two code sets:

    ons.ready(function(){
    ons.GestureDetector(document.getElementById('myList')).on('swipeleft',function(e){
         alert('swiped - '+e.target.id);
        });
     });
    
     ons.ready(function(){
        var swipeItems = document.querySelectorAll('.swipeable');
        for (var i = 0; i < swipeItems.length; i++) {
            swipeItems[i].addEventListener('swipeleft', function(e) {   
                alert('swiped - '+e.target.id);
            });
    
        }
    });
    
    
    <ons-gesture-detector>
      <ons-list id="myList">
        <ons-list-item id="itm1" class="swipeable">Item A</ons-list-item>
        <ons-list-item id="itm2" class="swipeable">Item B</ons-list-item>
        <ons-list-item id="itm3" class="swipeable">Item C</ons-list-item>
        <ons-list-item id="itm4" class="swipeable">Item D</ons-list-item>
      </ons-list>
    </ons-gesture-detector>
    

    You can choose either ons.ready function and you get the same result. If you go with the first one, my preferred method, you do not need the ons-gesture-detector element nor do you need a class. The second way, would be good if you are wanting to make it easier to implement into a built in function I would think.

    Either way results in the same problem. e.target.id returns nothing. Any thoughts?


  • Onsen UI

    @munsterlander I don’t understand much about the Gesture Detector but I looked into your issue and it seems like the target of the event is actually the div created inside ons-list-item rather than the element itself, hence the null id value.


  • Onsen UI

    In that case, I guess you need to check the parent elements until ons-list-item appears. This is something we want to implement in the core lib but, unfortunately, it cannot be a priority right now :/



  • @Fran-Diox @misterjunio Thanks for the info. I will keep plodding along with this a bit and hopefully come up with some code that can at least help out a bit for an eventual PR. Restructuring the core code is beyond my level of knowledge. I have been able to make some changes, but I experienced unanticipated issues with other components, so I figure I will leave the awesome behind the scenes magic to you guys! :+1:



  • I would love to have this in core as well with nice animations. List Handling is on of the main uses in mobile apps.

    Code above almost did it. I use this to handle UI and data:

    <ons-page>
      <ons-toolbar>
        <div class="center">Lists</div>
      </ons-toolbar>
      <ons-list id="mylist">
      </ons-list>
    </ons-page>
    
    ons.ready(function() {
      for (var i = 0; i < 11; i++) {
        var item = $(
          "<ons-list-item data-id='" +
            i +
            "' tappable>Test " +
            i +
            "</ons-list-item>"
        );
        item[0].addEventListener("swipeleft", function(e) {
          var data = $(this).data("id");
          alert(data);
          $(this).remove();
        });
        $("#mylist").append(item);
      }
    });
    

    Sure if you prefere VanillaJS. Replace the jQuery with the corresponding alternatives… Cheers.