topic Re: Custom draggable window oustide widget area. in ArcGIS Experience Builder Questions

Custom draggable window oustide widget area.

w3nd — Wed, 18 Jun 2025 20:47:42 GMT

I'm trying to make a custom draggable window to show on my map. I've created this widget:

import React, { useState } from 'react'; import { Rnd } from 'react-rnd'; import { DownDoubleOutlined } from 'jimu-icons/outlined/directional/down-double'; import { CloseOutlined } from 'jimu-icons/outlined/editor/close'; const DraggableResizableComponent = () => { const [showOptions, setShowOptions] = useState(false); return ( <> <Rnd default={{ x: 100, y: 100, width: 320, height: 200, }} minWidth={200} minHeight={120} maxHeight={400} maxWidth={300} dragHandleClassName="draggable-header" bounds="window" style={{ backgroundColor: 'rgba(128, 128, 128, 0.5)', border: '1px solid #ccc', borderRadius: '4px', }} enableResizing={{ bottomRight: true, bottom: false, bottomLeft: false, left: false, right: false, top: false, topLeft: false, topRight: false, }} > <div className="draggable-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px', backgroundColor: '#000', color: '#fff', borderBottom: '1px solid #ccc', marginTop: '5px', position: 'relative', }} > <div style={{ display: 'flex', alignItems: 'center', gap: '10px', position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)' }}> <div onClick={() => setShowOptions(!showOptions)} style={{ cursor: 'pointer', position: 'relative', top: "-2px"}} > <DownDoubleOutlined size="m" color="#fff" /> {showOptions && ( <div style={{ position: 'absolute', top: '24px', right: '0', backgroundColor: '#fff', color: '#000', border: '1px solid #ccc', borderRadius: '4px', zIndex: 1000, minWidth: '120px', }} > <div style={{ padding: '8px', cursor: 'pointer' }} onClick={() => { console.log('Opção 1'); setShowOptions(false); }} > Opção 1 </div> <div style={{ padding: '8px', cursor: 'pointer' }} onClick={() => { console.log('Opção 2'); setShowOptions(false); }} > Opção 2 </div> </div> )} </div> <CloseOutlined size="m" color="#fff" onClick={() => console.log('Close Window')} /> </div> </div> <div style={{ padding: '10px' }}> Content </div> </Rnd> </> ); }; export default DraggableResizableComponent;

The problem is when i try to put this on the map. the Drag is being restricted by the widget area and i want it to behave like the Widget Controller Window, that can be moved arround all the app.
How can i acheive this? I've tried to put in a higher hierarchy on DOM but no sucess.

Re: Custom draggable window oustide widget area.

JunshanLiu — Fri, 20 Jun 2025 03:21:11 GMT

I guess this may be restricted by the "react-rnd" lib. Jimu has a draggable component https://developers.arcgis.com/experience-builder/storybook/?path=/docs/components-jimu-ui-index-draggable--docs, could you check whether you can use it?

Re: Custom draggable window oustide widget area.

w3nd — Fri, 20 Jun 2025 20:18:48 GMT

Thank you for reply.

I tested and it has the same behavior, Only movable on the widget area =/

Re: Custom draggable window oustide widget area.

JunshanLiu — Mon, 23 Jun 2025 00:37:28 GMT

Have you tried the "bounds" property?

Re: Custom draggable window oustide widget area.

w3nd — Mon, 23 Jun 2025 12:44:27 GMT

Yep. Line 23, i tested changing to app div but also, no success.

Re: Custom draggable window oustide widget area.

JeffreyThompson2 — Mon, 23 Jun 2025 14:34:49 GMT

Try building this test application:

Start with a Blank Full-Screen application.
Add your widget and make fill the entire screen.
Place some other widgets physically on top of your widget.

Re: Custom draggable window oustide widget area.

Allen_Zhang — Tue, 24 Jun 2025 06:40:33 GMT

Try adding a canCrossLayoutBoundary: true to the properties in the manifest.json.

This property is false by default, and it allows content inside the widget across the widget boundary.