Unable to drag and drop rules

[ohyae]

Hello,

I'm currently working on implementing React Awesome Query Builder in my project, and I've encountered an issue with enabling the drag and drop functionality for both groups and rules. Despite configuring the canReorder prop as true as per the documentation, the functionality doesn't seem to work as expected as shown in the video below:

Screen.Recording.2023-10-29.at.01.11.31.mov

Here's an overview of my setup:

 "@react-awesome-query-builder/ui": "^6.4.2",
 "react": "^18.2.0",
"react-dom": "^18.2.0",

import React, { useState } from 'react';
import { Query, Builder, BuilderProps, ImmutableTree, JsonLogicTree, Config, BasicConfig, Utils } from '@react-awesome-query-builder/ui';
import ErrorBoundary from 'components/ErrorBoundary';
import '@react-awesome-query-builder/ui/css/styles.scss';

const DEFAULT_OR_QUERY: JsonLogicTree = { or: [] };

const config: Config = {
  ...BasicConfig,
  fields: {
    ...BasicConfig.fields,
    age: {
      label: 'Age',
      type: 'number',
      defaultValue: 18,
      defaultOperator: 'less',
      fieldSettings: {
        min: 1,
        max: 150,
      },
      valueSources: ['value'],
    }
  }
};

const initialQuery: ImmutableTree = Utils.loadFromJsonLogic(DEFAULT_OR_QUERY, config)!;

export function QueryDemo() {
  const [query, setQuery] = useState<ImmutableTree>(initialQuery);

  return (
    <ErrorBoundary message="An error occured in the query builder.">
      <Query
        value={query}
        onChange={setQuery}
        {...config}
        renderBuilder={(props: BuilderProps) => (
          <div className="query-builder-container">
            <Builder {...props} />
          </div>
        )}
      />
    </ErrorBoundary>
  );
}

I'm reaching out to the community for assistance in debugging and resolving this issue. If anyone has encountered a similar problem or has expertise with React Awesome Query Builder, your guidance would be greatly appreciated.

• Have you faced a similar issue and found a solution?
• Are there any additional configurations or considerations I should be aware of?
• Could there be any potential conflicts with other dependencies or libraries?

I'm open to any suggestions, code examples, or guidance you can provide to help me enable the drag and drop functionality successfully. Your insights would be invaluable in moving forward with this project.

Thank you!

[ukrbublik]

From the readme

Wrapping <Builder /> in div.query-builder is necessary.

        renderBuilder={(props: BuilderProps) => (
          <div className="query-builder-container">
            <div className="query-builder qb-lite">
                <Builder {...props} />
            </div>
          </div>
        )}

[ohyae]

Thank you!