Make only background div draggable

[syllith]

I have a modal that pops up which has textboxes inside it. The problem is, when attempting to highlight text in that popup modal, it drags the window instead of highlighting. Can I make it so it ignores when dragging on objects inside the div, and only move when the div itself is dragged? Right now it seems to apply to an entire component only.

<BanModalReactable
                    loadBans={loadBans}
                    draggable={{
                        cursorChecker: () => "default",
                        modifiers: [
                            interact.modifiers.restrictRect({
                                restriction: 'parent',
                                endOnly: true
                            })
                        ]
                    }}
                    onDragMove={(event) => {
                        const { dx, dy } = event;
                        setBanModalCoord((prev) => ({
                            x: prev.x + dx,
                            y: prev.y + dy,
                        }));
                    }}
                    x={banModalCoord.x}
                    y={banModalCoord.y}
                />

[beizhedenglong]

@syllith I think you can define a draggable area. Such as making the modal header a draggable area and every thing else can't be draggled.

const Demo = (props: DemoProps) => {
  const { getRef, x, y, angle, width, height } = props
  return (
    <div
      style={{
        position: "relative",
        left: x,
        top: y,
        width: width,
        height: height,
        transform: `rotate(${angle}deg)`,
        border: "1px solid black",
        boxSizing: "border-box",
      }}
    >
     {/* only this div can be dragged  */}
      <div ref={getRef}> 
        Draggable Area
      </div>
    </div>
  )

[syllith]

Ah ok, perfect. Looks like I basically had this set up, all I needed to do was move the ref to a different location. Easy enough. Thank you very very much!