Modular Drag-and-Drop Library for Lower Browser Load
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional drag and drop (DND) libraries are large in size, leading to increased load times and browser-processing requirements, and often provide inconsistent results and poor user experience due to their complexity and lack of customization for different draggable entities.
Innovation Solution
A modular DND library is introduced, utilizing a core component that abstracts the native browser DND API and includes adapter components tailored to specific entity types, allowing for a smaller size and improved user experience, with optional add-on components for additional functionality.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If a conventional drag and drop 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 drag and drop library is divided into separate adapter components, each handling specific entity types. The core component provides fundamental functionality while adapters add type-specific behavior. This segmentation allows the library to be loaded in parts rather than as a monolithic unit, reducing initial load time while maintaining full functionality.
Solution Approach 2:
Type-specific drag and drop logic is extracted from the core library into separate adapter components. This extraction removes unnecessary code from the main library bundle, reducing its size and load time, while adapters can be loaded on-demand based on the specific entity types present in the application.
2Reliability
If a conventional drag and drop library is used, then drag and drop functionality is provided, but the library size is large leading to increased browser-processing requirements
Solution Approach 1:
The library is segmented into a core component and multiple adapter components. The core component contains only essential drag and drop functionality, reducing the amount of code that must be processed by the browser. Adapter components are processed only when their corresponding entity types are encountered, minimizing overall browser processing requirements.
3Adaptability or versatility
If a conventional drag and drop library is used, then basic drag and drop functionality is provided, but the results are inconsistent and user experience is poor due to lack of customization
Solution Approach 1:
Each adapter component is specialized for a specific entity type, providing locally optimized drag and drop behavior tailored to that type's requirements. This local quality approach ensures consistent and appropriate handling for each entity type while maintaining overall system versatility through the collection of specialized adapters.
Solution Approach 2:
The core component acts as an intermediary that coordinates between the native browser DND API and the application-specific entity types. It provides a consistent interface and event handling mechanism that ensures reliable results, while adapters mediate between this standardized interface and the specific requirements of different entity types.
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.