Cross-Container Component Control in Interface Editors
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current display interface editing processes are not flexible, as components cannot move across containers, limiting the editing and design capabilities of display pages.
Innovation Solution
A cross-container control method and apparatus that allows components to be moved from one container to another by detecting overlap and utilizing drag inputs, selection inputs, and displaying container boundaries in response styles to facilitate flexible interface editing.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If components are restricted to move only within their own container, then container structure stability is maintained, but interface editing flexibility is reduced
Solution Approach 1:
The patent implements dynamic container boundaries that can be temporarily activated during drag operations. When a component is dragged, the system dynamically displays potential target container boundaries and automatically determines drop eligibility based on overlap detection, allowing flexible cross-container movement while maintaining structural stability during normal operation
Solution Approach 2:
The patent introduces an intermediary drag detection mechanism that mediates between the component being moved and the target container. The system detects overlap between the dragged component and potential target containers, and uses this intermediary detection to control whether the drop operation is permitted, enabling flexible editing while preserving container integrity
2Adaptability or versatility
If cross-container movement is allowed without restrictions, then editing flexibility is improved, but container hierarchy reliability deteriorates
Solution Approach 1:
The patent implements feedback mechanisms that provide visual indicators during drag operations. The system displays boundary indicators showing which containers are valid drop targets based on the hierarchy relationship, giving real-time feedback to guide the user's drop action and prevent invalid operations that would compromise hierarchy reliability
Solution Approach 2:
The patent performs preliminary detection of the container hierarchy relationship before allowing the drop operation. The system determines whether the target container is a valid parent or child of the source container's hierarchy, and only permits the drop if the relationship satisfies reliability requirements, preventing invalid hierarchical changes
3Ease of operation
If drag operation triggers immediate boundary display, then user guidance is improved, but system response complexity increases
Solution Approach 1:
The patent applies local quality by displaying container boundaries selectively only in the regions where overlap occurs during drag operations. Instead of displaying all container boundaries universally, the system highlights only the relevant target container boundaries that are spatially adjacent to or overlapping with the dragged component, providing user guidance without excessive visual complexity
Data Source
AI summary
The present invention relates to a multi-component cross-container control method, comprising: displaying an editor page, the editor page comprising a canvas area, and a plurality of components in a first container being displayed in the canvas area; and in response to a dragging input for at least two components in the plurality of components, when at least one component of the at least two components is overlapped with a second container, adding at least two components of target components into the second container, the second container being a sub-container or a parent container of the first container.