cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Disable Menu tab dragging and opening in a New Browser window on ThingWorx mashup

RA_10166134
4-Participant

Disable Menu tab dragging and opening in a New Browser window on ThingWorx mashup

Hi Team,

 

Need suggestion how we can prevent Dragging and opening a Menu tab of Menu widget in a new Browser window. Is it possible to apply a CSS or any other way for this?

 

Thanks,

Ravi

1 ACCEPTED SOLUTION

Accepted Solutions

You may want to finetune the css-selector but if you add the following as custom css to your mashup (without changing anything):

.menu-item-name{
   user-select: none;
   -webkit-user-drag: none;
}

>all< menu items won't be draggable anymore (tested in TWX 9.3.4). If you want to limit the behavior to a special menu you may want to give the menu a custom class and add it to the css selector.

Not clear for browser support but for Chrome it is working. I took the css from https://stackoverflow.com/a/66923120 

View solution in original post

4 REPLIES 4

Hello @RA_10166134 , 

 

Are you using the Menu tab widget in the existing Mashup or building in a New Mashup? also, what are you trying to achieve, it is not very clear from the posted query?

 

Regards

Bhawna

Hi Bhawna,

I am adding below steps to follow:
1) Create a mashup and add a Menu widget on it 

2) Link a Menu entity on the Menu widget in Properties to show menu options

3) Keep Menu Orientation view as Horizontal, Save and View mashup

4) Hold and drag one of the Menu tab and release on the Browser new tab

5) Menu opens up in new tab of the Browser

 

Any advise how we can prevent the menu from Dragging and opening in new Browser window?

 

Regards,

Ravi

You may want to finetune the css-selector but if you add the following as custom css to your mashup (without changing anything):

.menu-item-name{
   user-select: none;
   -webkit-user-drag: none;
}

>all< menu items won't be draggable anymore (tested in TWX 9.3.4). If you want to limit the behavior to a special menu you may want to give the menu a custom class and add it to the css selector.

Not clear for browser support but for Chrome it is working. I took the css from https://stackoverflow.com/a/66923120 

I specifically did not want to answer initially because the standard HTML Drag and drop API can't be used in this scenario since we can't set the value of an HTML attribute via CSS. That would be the cross-browser alternative, but I'm happy to learn about that CSS property! Though it would probably good to see where it can be used: https://caniuse.com/webkit-user-drag

Announcements