Disable swipe-left or right for certain elements, with listview swipe widget

Is it possible for the listview swipe widget to disable eather swiping right or left, for certain elements list, by adding some sort of class or JS snippet?
3 answers

The swipe widget uses the CSS line below to select the ListItem.

const listItems = this.targetNode.querySelectorAll(".mx-listview-item:not(.swipe-connected)");


Like Tim mentions you can add a not selector to filter out listitems with a specific class, e.g. .ignore-listitem. You can add these classes using the dynamic classes widget if the list is not too large, else you might want to use a single javascript snippet.

const listItems = this.targetNode.querySelectorAll(".mx-listview-item:not(.swipe-connected):not(.ignore-listitem)");



The swipe can be disabled per item, see documentation


This does not support disable only left or right, though this could be extended in the code, if you have the skills


Ill guess this code snippet will do the trick

        const prefix = this.options.classPrefix;
        if (event.pointerType === "mouse" 
                || event.target.closest(`.${prefix}-disabled`)
                || (event.target.closest(`.${prefix}-disabled-left`) && event.direction === Hammer.DIRECTION_LEFT)
                || (event.target.closest(`.${prefix}-disabled-right`) && event.direction === Hammer.DIRECTION_RIGHT)) {
            this.panCanceled = true;

Cheers, Andries


Very likely: yes. You would have to dive into the widget, looking for the function that executes the swiping, then look for the selector that selects the objects getting this function added and to that selector add .not(‘.MyClassForMyNonSwipableElements’). After adding MyClassForMyNonSwipableElementsto the objects that  you do want to be fixed.