How to allow drag only using drag handles?

[real-ashwin]

Hi,

Craft allows dragging of a node by clicking and dragging anywhere on the node. Is it possible to disable that and only allow drag from certain specific points - like the drag handle added by the Layers package?

Thanks.

[ankri]

Hi,

sure. This is a copy from a Component I wrote. Let me know if you need further help:

import React, { FunctionComponent } from 'react';
import { SidebarButton } from './SidebarButton';
import { faGripHorizontal } from '../icons';
import { useNode, useEditor } from '@craftjs/core';

export const MoveComponent: FunctionComponent = () => {
  const { query } = useEditor();
  const {
    connectors: { drag },
    isMoveable,
    isDragging,
  } = useNode((node) => ({
    isMoveable: query.node(node.id).isDraggable(),
    isDragging: node.events.dragged,
  }));

  return (
      <SidebarButton
        ref={drag} 
        disabled={!isMoveable}
        className={isDragging ? 'td-grabbing' : 'td-grab'}
        icon={faGripHorizontal}
        tooltip="Move component"
      />
  );
};

You can replace <SidebarButton /> with any other button. In my case I render the <Sidebar /> which contains the <MoveComponent /> button inside RenderNode