How to disable drag in side menu

tutorials
1

Hi i am new to Ionic as well Angular. How can i disable the drag event on side menu. I don’t want to reveal side menus on dragging the center content. I have found something called ‘defaultPrevented’ in ionic’s js files to prevent but can’t understand how to use it. Is there a way to do this. Also is there any way to alter the size of left and right menu without changing it in the ionic’s js files ??

6 Likes
2

Hey @saurabhgupta050. I just added an option to the side-menu-content directive to disable content dragging. To use it, set it like this:

<pane side-menu-content drag-content="false">

Is that a decent solution for you?

Also note, you 'll need to be on master to use this as I just committed it.

20 Likes
3

thanks @max , worked like a charm … :slight_smile:

Also I would suggest to add a feature to alter the size of left/right menu … Currently its fixed to 275px so i have to make change in the js file for desired value …

1 Like
4

Good idea. I will put it on the list.

1 Like
5

Hi there. is it possible to not disable the drag altogether but have it not enable drag gesture on certain elements? I want to implement a text editor in the content pane. It would be ideal to disable the swipe gesture on the text editor (textarea or contenteditable div). that way you could still highlight words in the text editor.

6

@max is it possible that you can add this attribute on a view to conditionally disable the drag? So if I’m on a particular view in my tabs, I can’t swipe to open the menu but if I’m on another tab, I get that functionality back?

5 Likes
7

i agree with that.For example i have a view with a range slider where i need to disable menu dragging (otherwise you cant use the slider), but i want the menu drag in my other views…
Cheers

1 Like
8

i have a different problem… um using a side-menu with content including cards list … um only able to swipe the area between the cards or the header to get the drag thing working and opens the side-menu (Cordova Android), BUT it’s working on my PC’s browser as i drag any where on the page.

any help please.

9

It worked. I’ve changed the <list> tag to be <div class="list"> :smile:

10

I’m currently using the low-level implementation of the side menu. Can I have the equivalent snippet for the low-level implementation? Thanks.

11

For anyone who needs this: it is possible to set the ‘draggableness’ of the sidemenu per view by using this in your controller:

$ionicSideMenuDelegate.canDragContent(false) or $ionicSideMenuDelegate.canDragContent(true).

21 Likes
12

Could I apply the same method if I want to prevent the ‘draggableness’ of a slide in the slider box?

13

Not that I know of… But I haven’t tried.

14

@dani_tk try $ionicSlideBoxDelegate

15

I’m having problems with this drag-content=“false”. In the content area I’ve created a small card like widget using $ionicGesture events. I want to disable the option to swipe open the side-menu because this interaction conflicts with this widget I’ve build. But if I set

<pane side-menu-content drag-content="false">

ALL dragging events seem to stop working in the content pane - not only the opening/closing of the side-menu. Is this a bug or am I doing something wrong?

(BTW, great framework! I love Angular and Ionic is a great supplement for developing Cordova apps)

16

Okay disregard my previous comment, it looks like I did something wrong somewhere… Keep up the good work!

17

step1.:set ion-side-menu-content drag-content=“toggledrag”

setp2: In controller,
$rootScope.toggledrag = false;
or
$rootScope.toggledrag = true;

Example:

.controller(‘yourCtrl’, function ($rootScope,$scope, YourService) {

    $rootScope.toggledrag = false; 
     
})
6 Likes
18

Thanks for that solution. I’ve been trying to just disable one of my side navs without disabling the other and this worked :smile:

1 Like
19

can you give me a simple example please ?

1 Like
20

can you tell me what is the way worked for you ?