nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Floating/draggable PopUp window

demdeberanz

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

Thank you very much for helping me.

Find more posts tagged with

Accepted answers

All comments

KevinMacLeodCAI

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.

Mr_Kirkwood

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

Mr_Kirkwood

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

JeffJacobson

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);

});

ShaunWeston

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"));

ShaunWeston

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?

demdeberanz

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.

__Rich_

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.

demdeberanz

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.

DavideLimosani

you can try with this:

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.