Which API will allow users to click and drag my visual

[VizDataLtd]

Hello,

I've noticed that I can't move my custom visual by clicking and dragging it, once i have imported it into Power BI Service or Desktop. In fact, if I click outside the svg area (the tiny border around the svg), I can drag, but that is not intuitive for users. I tried using styling to make svg pointer-events: none, which didn't help. When i log .allowInteractions to the console, it is true.

I also can't copy/paste easily: I have to copy, click away and then paste, while standard visuals behave more intuitively. I can change the x,y co-ordinates. When I hover, I see a hand rather than an arrow.

When I google, I find loads of results for using selection manager: Power BI visual data point selections - Power BI | Microsoft Learn 

But I'm not talking about selecting the elements within my visual: I just want users to be able to move the visual itself. Can anyone help?

Thanks

Emma

[VizDataLtd]

@dm-p Can you tell me: do I need to build mouseDown, mouseUp and dragging handlers for my visual to achieve click and drag? Mine has a full height, full width rect element. If I remove suppressDefaultTitle, I can drag in the title area but not within the svg area. I guess Microsoft have built drag handlers, and they also differentiate between click (to select) and drag over, for example, segments within a pie chart. Can custom visual developers even access the x,y location of the sandbox? I can't see this in any examples online: https://github.com/microsoft/PowerBI-visuals-sampleBarChart/blob/main/src/barChart.ts 

[dm-p]

It's not possible to affect the position or size of a custom visual programmatically. The behavior (whilst frustrating) is standard for all custom visuals. Anything in the 'General' properties menu cannot be read or written to, unless MS provides a specific API for it via the visual host services.

If you're comparing with the core visuals, there is a big difference in how there are integrated into a page - they are part of the same DOM. Custom visuals are comprised of a container (which is owned by MS and ocntains all 'standard' logic and events to make their behaviour consistent). This is also hosted in the same DOM, but then includes the sandboxed iframe that hosts your visual. As such the higher-level container that holds your visual's host element cannot be overridden using CSS or JS, as it cannot reach 'above' the iframe.

[v-yangliu-msft]

Hi  @VizDataLtd ,

This is the related document, you can view this content:

https://blog.enterprisedna.co/power-bi-visuals-tutorial-how-to-easily-move-visuals/

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

Visual interactions in Power BI visuals - Power BI | Microsoft Learn

Best Regards,

Liu Yang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[VizDataLtd]

Thanks for your reply, but I remain confused. Is it possible for a custom visual to be clicked-and-dragged in the same way as a standard visual? In the screenshot, I am dragging a standard bar chart. I have clicked in the middle of the visual and then dragged it (you cannot see the arrow, but it is in the center).

Clicking and dragging a standard visual

As per your links, I have tried setting allowInteractions to false and I have tried changing pointer-events but these have not helped. I also tried event.stopPropagation() as the single line of code in an on click() event, following the bar chart example.

The link you provided on clicking the ellipses to move the visual suggests to me that it is not possible to create the same click-and-drag behaviour with custom visuals as with standard ones.

Every custom visual I download to test, cannot be clicked and dragged. Please save me some time and confirm my suspicion that this isn't possible. (This seems an enormous limitation - users will think the visual is broken.)