topic Re: Floating/draggable PopUp window in ArcGIS JavaScript Maps SDK Questions

Floating/draggable PopUp window

demdeberanz — Tue, 28 Aug 2012 06:18:35 GMT

Hi everybody,
how to make a popup window floating and draggable?

Thank you very much for helping me.

Re: Floating/draggable PopUp window

DavideLimosani — Tue, 28 Aug 2012 06:34:55 GMT

you can try with this:

http://www.arcgis.com/home/item.html?id=cf41ba2f1798462f9386efdd674f36ba

Re: Floating/draggable PopUp window

demdeberanz — Tue, 28 Aug 2012 07:03:54 GMT

you can try with this:

http://www.arcgis.com/home/item.html?id=cf41ba2f1798462f9386efdd674f36ba

Thank you very much for your quick reply, dlimos. I've already used the dojo floating pane but how to automatically bind the feature information to the pane?

Thank you.

Re: Floating/draggable PopUp window

__Rich_ — Tue, 28 Aug 2012 07:13:21 GMT

Always interested to see what people have tried for themselves so far...

..but anyway, if you have a widget that already does most of what you want e.g. display attributes, then have you considered making that widget draggable? (if the widget is suitable, - might not be)

For example, using dojo-dnd-moveable?

Or another approach could be to combine a container widget that does all the dragging stuff with a widget that does the display stuff, i.e. put one inside the other.

Or you could try and write your own either from scratch or start with an existing widget and extend it.

You have to decide, after research, which is the better approach for your requirements/ability etc.

Re: Floating/draggable PopUp window

demdeberanz — Tue, 28 Aug 2012 15:06:54 GMT

Always interested to see what people have tried for themselves so far...

..but anyway, if you have a widget that already does most of what you want e.g. display attributes, then have you considered making that widget draggable? (if the widget is suitable, - might not be)

For example, using dojo-dnd-moveable?

Or another approach could be to combine a container widget that does all the dragging stuff with a widget that does the display stuff, i.e. put one inside the other.

Or you could try and write your own either from scratch or start with an existing widget and extend it.

You have to decide, after research, which is the better approach for your requirements/ability etc.

Dear geos_rfleet,
I'm glad to you for the reference I managed to find the solution, simply declaring a variable as a dnd.Moveable(domNode).

Thank you very much.

Re: Floating/draggable PopUp window

ShaunWeston — Sat, 11 Dec 2021 16:20:37 GMT

Has anyone got this to work, I've tried setting it up like this:

        var popup = new esri.dijit.Popup(popupOptions, dojo.create("identifyDiv"));


        var dnd = new dojo.dnd.Moveable(dojo.byId("identifyDiv"));

and added an identifyDiv tag to the html page, but still not moveable?

Re: Floating/draggable PopUp window

ShaunWeston — Sat, 11 Dec 2021 16:20:39 GMT

Ah, figured it out, just need to reference the div rather than create:

        popup = new esri.dijit.Popup(popupOptions, "identifyDiv");
        var dnd = new dojo.dnd.Moveable(dojo.byId("identifyDiv"));

Re: Floating/draggable PopUp window

JeffJacobson — Wed, 27 Aug 2014 22:12:53 GMT

require([
    "esri/arcgis/utils", 
    "dojo/dnd/Moveable"
], function (arcgisUtils, Movable) {
    "use strict";
    var mapId = "bc6e18b0c332407e800c234de472939f"; // Replace with your own map ID from ArcGIS.com.
    
    /**
     * Makes the popup draggable.
     * @returns {dojo/dnd/Movable}
     */
    function makePopupDraggable(){
        var popupDiv = document.querySelector(".esriPopup");
        var dnd;
        if (popupDiv) {
            dnd = new Movable(popupDiv);
        }
        // TODO: Figure out how to make the little arrow point the right way after dragging.
        return dnd;
    }

    arcgisUtils.createMap(mapId, "map", {
        usePopupManager: true,
        mapOptions: {
            center: [-120.80566406246835, 47.41322033015946],
            zoom: 7,
            minZoom: 7
        }
    }).then(makePopupDraggable);

});

Re: Floating/draggable PopUp window

RobertKirkwood — Fri, 22 Nov 2019 22:31:47 GMT

This works, but then you cannot select any text inside the popup. is there a way to work around that?

Re: Floating/draggable PopUp window

RobertKirkwood — Fri, 22 Nov 2019 22:32:10 GMT

This works, but then you cannot select any text inside the popup. is there a way to work around that?

Re: Floating/draggable PopUp window

KevinMacLeod3 — Tue, 01 Sep 2020 17:34:40 GMT

Robert Kirkwood if you use method here, jQuery can allow for selection in inner elements.

https://codepen.io/kevinsagis/full/bGpdQQq

moving and resizable popups in API 4.x

This code should work fine in 3x or WebApp Builder as well. Just add jQuery and jQuery UI.