feat(drag-n-drop): add item dragging into grid

[skutam]

New Feature: ktd-drag Directive and DragRef Class (Draft)

Description

This pull request introduces the ktd-drag directive and the DragRef class to enhance the Angular-grid-layout library. The ktd-drag directive allows users to drag new items into the grid seamlessly. It integrates with the existing functionality of the Angular-grid-layout library and provides optional parameters, events, and support for custom drag data.

The DragRef class serves as a foundational component, handling the logic for dragging operations. It includes features such as drag handles, drag start threshold, and manual drag initiation.

Changes Made

• Added ktd-drag directive to facilitate dragging new items into the grid.
• Implemented the DragRef class to handle drag operations.
• Introduced optional parameters for ktd-drag directive, such as disabled, dragStartThreshold, and draggable.
• Included events for dragStart, dragMove, and dragEnd.
• Integrated with the existing Angular-grid-layout library seamlessly.

Main Problems (Marked with TODO:)

1. Problem: Scroll Offset Support in ktd-drag Directive

   The current implementation lacks support for handling scroll offset during the drag operation. The TODO: comment suggests adding this functionality. To address this, consider creating observables for each scroll parent element that emit scroll offset values. Use these offsets when the dragged item is on top of the respective scroll parent. Be mindful of potential challenges with nested scroll parents, especially in the context of nested grids.

2. Problem: Handling Large Custom Data

   Another challenge is how to handle custom data in the ktd-drag directive, particularly when the data could contain large JSON. Passing large data directly to calculating functions may not be optimal. Explore alternative approaches, such as passing a reference or key that allows fetching the data when needed. Ensure comprehensive testing for scenarios related to large custom data.

Usage

Developers can use the ktd-drag directive to enable dragging of new items from an external source and dropping them onto the ktd-grid. The directive supports various configurations and events to provide a flexible dragging experience.

Testing

Test cases have been added to ensure the correct functionality of the ktd-drag directive and the DragRef class. The implementation has been tested with different scenarios, including drag start, drag move, and drag end.

Note to Reviewers

I appreciate your time and consideration in reviewing this pull request. The addition of the ktd-drag directive and DragRef class aims to enhance the versatility of the Angular-grid-layout library. I am open to feedback and collaboration on any further improvements.

[mcrodriguezb]

Hi,

Great library. Really happy with the functionalities. I'm looking for this feature. Will this be merged any time soon?

Best, MC

[skutam]

@mcrodriguezb hello it is currently partially done, basically it works but there are still bugs that I am fixing because it is a large feature that also includes drag n drop between grids.

You can help with the testing if you want to, because I am currently trying to use it in my project and by using it am also testing it.