Custom draggable window oustide widget area.

[w3nd]

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.

[JunshanLiu]

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-drag... could you check whether you can use it?

[w3nd]

Thank you for reply.

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

[JunshanLiu]

Have you tried the "bounds" property?

[w3nd]

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

[JeffreyThompson2]

Try building this test application:

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

[Allen_Zhang]

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.