Modular Drag-and-Drop Library for Faster Object Tracking UI
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional drag and drop (DND) libraries for graphical user interfaces are large in size, leading to increased load times and browser-processing requirements, and often provide inconsistent and complex user experiences, especially in object tracking software applications.
Innovation Solution
A modular DND library with a core component and adapter components that utilize the native browser DND API, providing an abstraction layer and allowing selective inclusion of adapters and add-ons based on entity types, enabling efficient and customizable DND operations.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If a conventional DND library is used, then drag and drop functionality is provided, but the library size is large leading to increased load times and browser-processing requirements
Solution Approach 1:
The DND library is divided into a core component and multiple adapter components. The core component contains essential drag and drop functionality, while adapter components provide specific implementations for different entity types (images, videos, documents, etc.). This segmentation allows the library to load only the necessary core functionality plus selected adapters, reducing overall load time while maintaining full functionality when needed.
Solution Approach 2:
Specific adapter functionalities are extracted from the main library as separate, optional components. These adapters can be selectively included or excluded based on the specific needs of the application, allowing the base library to remain lightweight while providing the option to add specialized functionality only when required.
2Reliability
If a conventional DND library is used, then drag and drop functionality is provided, but browser-processing requirements increase
Solution Approach 1:
By segmenting the library into core and adapter components, the browser only needs to process the essential core functionality and a limited set of relevant adapters, rather than loading and processing an entire monolithic library. This reduces memory usage and processing overhead.
Solution Approach 2:
The core component is designed to be universal and handle common drag and drop operations for all entity types. Specific entity-type handling is delegated to optional adapters, allowing the core to remain lightweight while providing broad functionality through a single multi-purpose component.
3Reliability
If a conventional DND library is used, then drag and drop functionality is provided, but the user experience is inconsistent and complex
Solution Approach 1:
The core component acts as an intermediary layer between the browser's native drag and drop API and the various entity-specific adapters. This standardized interface ensures consistent behavior across different entity types while allowing each adapter to handle its specific requirements, resulting in a uniform and predictable user experience.
Solution Approach 2:
The adapter components allow dynamic configuration and customization of drag and drop behavior based on entity type. By changing parameters and options at the adapter level rather than requiring different libraries for different entities, the system maintains consistency while adapting to specific needs.
Data Source
AI summary
Example methods and computer programs for performing drag and drop (DND) operations are disclosed. The method includes detecting, at an adapter component of a DND library, commencement of a DND operation on a selected draggable entity in a web browser, and communicating, by the adapter component, a message to a core component of the DND library indicating the commencement of the DND operation and including information about the selected draggable entity. The method further includes activating, by the core component, API event listeners to detect API events fired by a native DND API of the web browser, detecting the API events, and computing drop targets in the web browser for the selected draggable entity. The method further includes firing, by the core component, core events, detecting, by the adapter component, the core events, and performing operations by the adapter component, in response to the core events.