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.

Najděte více příspěvků označených jako

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/

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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