Raxol.UI.Interactions.DragDrop (Raxol v2.0.1)

@type drag_options() :: %{
  optional(:draggable) => boolean(),
  optional(:drag_data) => map(),
  optional(:constraints) => %{
    optional(:horizontal) => boolean(),
    optional(:vertical) => boolean(),
    optional(:bounds) => %{
      x: number(),
      y: number(),
      width: number(),
      height: number()
    }
  },
  optional(:visual_feedback) => %{
    optional(:ghost_opacity) => float(),
    optional(:drag_preview) => term(),
    optional(:cursor_style) => atom()
  },
  optional(:drop_validation) => (term(), map() -> boolean()),
  optional(:accessibility) => %{
    optional(:announce_drag_start) => boolean(),
    optional(:announce_drop) => boolean(),
    optional(:keyboard_enabled) => boolean()
  }
}

drag_state()

@type drag_state() :: %{
  active: boolean(),
  dragging_element: term() | nil,
  drag_data: map(),
  start_position: %{x: number(), y: number()} | nil,
  current_position: %{x: number(), y: number()} | nil,
  drag_offset: %{x: number(), y: number()},
  constraints: map(),
  visual_feedback: map(),
  drop_zones: list(),
  valid_drop_target: term() | nil
}

Functions

end_drag(state, drop_position, cancelled \\ false)

Handle the end of a drag operation (drop or cancel).

handle_drag_move(state, new_position)

Handle drag movement during an active drag operation.

handle_keyboard_drag(state, element_id, key, drag_config)

Handle keyboard-based drag and drop for accessibility.

init()

Initialize the drag and drop system state.

Examples

iex> DragDrop.init()
%{active: false, dragging_element: nil, ...}

make_draggable(element_id, options \\ %{})

Make a component draggable with the specified options.

Examples

iex> DragDrop.make_draggable("my_button", %{
...>   drag_data: %{type: :button, id: "my_button"},
...>   constraints: %{horizontal: true},
...>   visual_feedback: %{ghost_opacity: 0.8}
...> })

register_drop_zone(zone_id, options)

Examples

iex> DragDrop.register_drop_zone("sidebar", %{
...>   accepts: [:button, :widget],
...>   bounds: %{x: 0, y: 0, width: 200, height: 600},
...>   validation: &validate_sidebar_drop/2,
...>   visual_feedback: %{highlight_color: :blue}
...> })

start_drag(state, element_id, position, drag_config)

Handle the start of a drag operation.

Parameters

state - Current drag/drop state
element_id - ID of element being dragged
position - Mouse position where drag started
drag_config - Configuration for the draggable element

Returns

Updated drag/drop state with drag operation active.