Adds draggable functionality to marquee

[waleed-salama]

This pull request introduces a new draggable functionality to the Marquee component, allowing users to drag the marquee content using mouse or touch interactions. The changes include modifications to the component's styles, properties, and event handling logic. Resolves #93.

Draggable Functionality:

• Added new styles for draggable states in src/components/Marquee.scss:

  • .rfm-draggable for the default draggable cursor.
  • .rfm-dragging for the dragging cursor and disabling user selection.

• Updated MarqueeProps in src/components/Marquee.tsx to include a new draggable property:

  • Added draggable property with a default value of false. [1] [2]

• Implemented drag event handling in Marquee component:

  • Added state and refs for managing drag state, start position, and animation position.
  • Created functions for handling drag start, move, and end events, including smooth transitions using requestAnimationFrame. [1] [2]
  • Updated the component's rendering logic to apply draggable styles and event handlers conditionally. [1] [2]