Make infowindow draggable

AzizaParveen2

We have several GIS apps built using JavaScript API where our users want to drag infowindow / pop up window to their desired location on map. Most of the times infowindows gets cropped, which looks very unprofessional, so it would be nice if we can drag and reposition the window, something like the callout box in MS Word or Powerpoint.

JeffWard · ‎09-23-2015

I agree, a highlighted feature is sufficient to indicate the selected feature. The popup infowindow covers most of the feature especially when the feature is a polygon. Allow our users to drag the infowindow wherever they like, or at least make a tag called "anchored" to allow us the option of making the infowindow free floating.

AndrewWillingale · ‎11-19-2015

A draggable infowindows is an excellent idea. I've just been chatting to a user about how the infowindow is hiding the feature that she has clicked on so she can't see the extent of it.

Anonymous User · ‎04-18-2016

Popup windows should also be draggable on web maps on AGOL and in the WebApp Builder.

This is HUGE. I have been asked this by hundreds of users. Esri please contact me if you would like. This is really important. I can't stress enough. I'm surprised this doesn't have thousands of points; perhaps there are other topics yet to be merged. This is everyone's first question upon seeing a popup for the first time when I show them. Like clockwork.

Currently on our public site www.sagis.org we use jQuery UI dialogs. Draggable is easy with jQuery and perhaps Dojo (though i've found jQuery so much easier to work with in the UI department but I know the API is well-anchored to Dojo for the time being.) I have not had a chance yet to play with displaying popup results in a different DIV but even if I got that working it wouldn't be optimal, not as good as a moveable window which is a UI metaphor users expect. I watch them try to drag it and get frustrated and confused when they can't. For Now.. for popups, the way I "get around" this for now, is using a semi-transparent background on the popups with a transparent PNG. I would also personally recommend esri let us set opacity of the popup background out of the box but I know that may be going a bit far and we can also do this on our own with CSS. So for now, allowing us to move popups, and perhaps allowing for a customizable leader line that moves with the popup and/or can be turned off, would be so appreciated by our hundreds of thousands users. (this would also address their question of showing parcel info on the printout. We still have 10.2 Server and I couldn't quite get print info onto the page with print templates when I attempted it two years ago.. maybe it's gotten easier since but this would also solve that as well)

AdamCrateau · ‎02-27-2020

We have customers who feel so strongly about this, we are considering hosting a WAB Developer version of the application, just so they can drag the popup away from the feature and view both the entire feature and the popup at the same time.

The dockable infowindow functionality in the 4.x API will also work. Why has this functionality not made its way into the 3.x/WAB?

Anonymous User · ‎07-28-2020

Adam Crateau‌ this thread has directions on how to do this https://community.esri.com/message/750577-re-move-the-popup-widow-in-wab?commentID=750577#comment-75... for a working example see www.sagis.org/map and GitHub - kevinsagis/CustomizedWebApp_DeveloperEdition212: Customized Esri WebApp Builder Developer E... For a non WAB example see Draggable Popups fiddle What they will hopefully do is make this a native functionality in API 4.x. Not only for Popup but for any widget with an interface. Angular or most modern frameworks can do it but then everyone will do it a different way. And requiring in a framework for this is like cutting butter with a bandsaw.

Anonymous User · ‎08-10-2020

I have created moveable popups for JS API 4.x. Example: https://codepen.io/kevinsagis/full/bGpdQQq

It hides the callout on move with CSS; and is moveable via titlebar. Last thing to do still is implement a leader line that follows it like a callout. Using jQuery which is still awesome in 2020!