<div
  class="container rule"
  data-index={rule_index}
  data-group-index={group_index}
  data-uuid={rule_id}
  data-group-uuid={group_id}
  use:draggable={{
    container: `${group_id},${rule_id},${group_index},${rule_index}`,
    dragData: { rule_id, group_id, rule_index, group_index },
  }}
  use:droppable={{
    container: `${group_id},${rule_id},${group_index},${rule_index}`,
    callbacks: { onDrop: handleDrop },
  }}
  {...rest}
>