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

Draggable Modal?

Is there a way to allow the users to drag modal across the screen? I tried with the inline css but no success.

Vind meer berichten getagd met

Components

Accepted answers

Hi @LefterisKoumis, there is no built in way to drag the modal. You would have to wire something up yourself using a library like https://interactjs.io/

All comments

JeffreyWilkerson

Dojo has a library for dragging DIVs called "dojo/dnd/Moveable".

In an app I'm working on I have a draggle window for tools.

To this I have a div on the page with a whole bunch of buttons for tools:

<div id="toolsDiv" style="z-index:100;">
    <button id="btnFullExtent" class="ui-button" title="Full Extent">
        <i class="fas fa-expand-arrows-alt fa-lg"></i>
    </button>
    <button id="btnPrevExtent" class="ui-button" title="Previous Extent">
        <i class="fas fa-chevron-circle-left fa-lg"></i>
    </button>
    <button id="btnSearch" class="ui-button" title="Search">
        <i class="fas fa-search fa-lg"></i>
    </button>
    <button id="btnAddStop" class="ui-button" title="New Stop Button">
        <i class="fas fa-plus fa-lg"></i>
    </button>
...
</div>

Which sits within a DIV 'wrapper' that also has the map div init:

<div class="wrapper">
    <div id="toolsDiv" style="z-index:100;">
        <button id="btnFullExtent" class="ui-button" title="Full Extent">
...
    </div>

    <div id="viewDiv" class="map"></div>
    <div id="loadingDiv" class="loading"><img src="./resources/Loading.gif" height="100" width="100" /></div>

</div>

And CSS to render the tools Div:

#toolsDiv {
    padding: 10px;
    border: 3px solid #000;
    background: #fff;
    position: absolute;
    left: 150px;
    border-radius: 15px;
}

And then a call to instantiate the library:

let toolsDiv = new Moveable(dom.byId("toolsDiv"));

After that the the div can be dragged anywhere within the wrapper div.

Hi @LefterisKoumis, there is no built in way to drag the modal. You would have to wire something up yourself using a library like https://interactjs.io/

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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