Draggable Modal?

[LefterisKoumis]

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

[BenElan · Accepted solution]

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/

[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.