UPDATE: The two limitations mentioned previously have been now removed and this feature functions exactly as you would expect.
You will find a fully responsive version of an iOS Style swipe left to expose button(s) at the editor here https://bubble.is/page?type=page&name=index&id=swipe-to-del&tab=tabs-1and the live version here https://swipe-to-del.bubbleapps.io/version-test?debug_mode=true
Implementation: When building for yourself please note the following things which may not be obvious but which are critical.
- Position a Text of width 1 and height zero, not visible on page load, in the top left corner of the top cell. This is used a fixed origin point to enable correct movement left/right of the cell’s displayed contents.
- Make the two DropAreas, left and right, equal to half the width of your full-size page and position them to the furthest left and right positions.
- Ensure the drag/drop group that contains the cells’ displayed content has ‘Disable the ability to drag’ checked.
- Ensure the second drag/drop area, which is the one that is swiped left/right, has ‘Constrain the movement within the parent’ and the ‘Make this element droppable’ checked. Make its width a bit shorter than the width of your page and ensure it is in FRONT of all the elements mentioned in steps 1, 2 and 3 above.
- Finally, in FRONT of every other element position your Delete, or other buttons, to the far right.
- Install ZeroQode’s free CSS Tools plugin and set up a Page is Loaded workflow to put CSS into the header as per this example - it hides horizontal and vertical scrollbars.
HACK When experimenting I discovered a really useful hack. If the button to detect tapping a cell is wide then it is impossible to differentiate between a button tap and swipe/drag so both workflows are triggered. However, if the button is small then Bubble can differentiate. I choose to use an RG with multiple, in this case, 12, small buttons because it means I only have to make a single workflow and it runs for all buttons. The alternative would be 10 or 12 buttons each with their own workflow, all identical to each other.
I believe this feature could be enhanced with ZeroQode’s Touch and Mouse Event’s Detection to differentiate taps from tap and hold but I haven’t had the time to experiment with that yet.