Dynamic Virtual Board List Resizing During Object Drag-and-Drop
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing techniques for transitioning objects in virtual boards, such as Trello and Jira, often result in inaccurate sizing of placeholders and destination lists during drag and drop operations, leading to a jarring user experience.
Innovation Solution
A method and system that accurately sizes placeholders in the original and destination locations based on the size of the dragged object, and dynamically adjusts the destination list size during the drag and drop operation by using a global cache manager to retrieve and update list cache information in real-time.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If existing techniques are used for transitioning objects in virtual boards, then the implementation is simple, but the placeholder sizing and destination list sizing become inaccurate
Solution Approach 1:
The system performs preliminary actions by creating placeholders at both the source and destination locations before the actual drag-and-drop operation completes. The placeholder at the destination location is sized based on the dragged object's dimensions, and the placeholder at the source location maintains the space the object occupied. This preliminary positioning ensures accurate visual representation during the transition.
Solution Approach 2:
The patent introduces placeholder objects as intermediaries between the dragged object and its final destination. These placeholders serve as visual mediators that represent the object's current position and intended destination, allowing the system to maintain accurate sizing and positioning information throughout the drag-and-drop operation without requiring complex real-time calculations.
2Ease of operation
If existing techniques are used for transitioning objects in virtual boards, then the implementation is straightforward, but the user experience becomes jarring
Solution Approach 1:
The system dynamically adjusts the destination list's size placeholder before the object is fully dropped, providing a smooth visual transition. The placeholder list size is calculated based on the current list height plus the dragged object's height, creating a seamless expansion animation that enhances user experience by avoiding sudden layout shifts.
Solution Approach 2:
The patent replaces traditional mechanical layout recalculation systems with a placeholder-based visual system. Instead of immediately recalculating and repositioning all elements when an object is dragged, the system uses visual placeholders to represent the new layout state, providing smooth animations and eliminating jarring transitions while maintaining ease of operation.
3Adaptability or versatility
If segregated data storage is used for each storage location, then data organization is simple, but dynamic rendering of transitioning objects is limited
Solution Approach 1:
The patent implements a universal placeholder mechanism that works across all storage locations (lists) regardless of their segregated data storage. The placeholder system provides a common interface for representing transitioning objects, enabling dynamic rendering capabilities across the entire virtual board while maintaining the simplicity of segregated data organization at individual storage locations.
Data Source
AI summary
A method for dynamically re-sizing virtual board lists during a drag and drop operation. The method includes rendering a virtual board on a display including a first list and a second list, each having list objects. The method includes storing a total size of the first list and second list, and sizes of list objects in the first list and the second list in a corresponding first list cache and second list cache; detecting selection and movement of a list object from the first list to the second list; adding the size of the selected list object to the second list cache; and rendering and displaying a placeholder area of the selected list object, the placeholder area having the same size as the size of the selected list object, and displaying an increased size of the second list based on the updated total size of the second list.