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

[RA_10166134]

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

[bchaudhary]

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

[RA_10166134]

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

[nmutter · Accepted solution]

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 

[VladimirRosu]

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