Cross-Window Drag-and-Drop via Side-Channel Data Transfer
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional drag and drop (DND) systems are limited to performing operations within a single virtual board or webpage and lack the ability to efficiently transfer information between browser windows, leading to incomplete or inaccurate updates in source and destination virtual boards during cross-window DND operations.
Innovation Solution
Implementing a method that utilizes a side channel for communication between browser windows to pass information about the draggable element and the drop operation, allowing both source and destination browser windows to compute valid drop targets and update their displays accordingly.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If conventional drag and drop systems are used within a single browser window, then the operation is simple to implement, but the system cannot transfer information between browser windows leading to incomplete updates
Solution Approach 1:
The patent introduces a side channel as an intermediary communication mechanism between browser windows. The side channel receives drag start events from the source window, stores draggable element data, and delivers it to the destination window, enabling cross-window information transfer without direct window-to-window communication.
Solution Approach 2:
The drag and drop system is segmented into independent components: the source window's drag and drop module, the side channel communication layer, and the destination window's drag and drop module. This segmentation allows each component to function independently while maintaining overall system coordination through the side channel.
2Reliability
If cross-window drag and drop is implemented without a side channel, then the system architecture remains simple, but information transfer between windows is incomplete or inaccurate
Solution Approach 1:
The side channel acts as a reliable intermediary that ensures complete and accurate information transfer. It captures the full data payload from the drag start event, preserves it during transmission, and delivers it intact to the destination window, preventing information loss or corruption.
Solution Approach 2:
The system performs preliminary actions by capturing and storing the complete draggable element data in the side channel before the drag operation completes. This ensures all necessary information is prepared and available for accurate reconstruction in the destination window.
3Productivity
If traditional fields or menu controls are used for user input, then the interface is simple to design, but it is difficult or inefficient to provide input
Solution Approach 1:
The patent replaces traditional mechanical input methods (typing in fields, navigating menu controls) with a drag and drop interaction model. Users can visually select and drag elements directly to their destinations, substituting manual text input and menu navigation with intuitive graphical manipulation.
Solution Approach 2:
The interface transitions from static fields and menu controls to dynamic drag and drop operations. Elements can be moved freely across the interface, and the system dynamically responds to user actions by updating displays in real-time, providing a more flexible and efficient interaction model.
Data Source
AI summary
A method and computer-readable medium for animating a drag and drop operation starting in a first browser window and ending in a second browser window are disclosed. The method includes detecting, in the first browser window, a drag start event associated with a draggable element displayed on the first browser window, and communicating, by the first browser window, data about the draggable element to a side channel. The method further includes detecting, in second browser window, that the draggable element has entered the second browser window, retrieving, by the second browser window, the data about the draggable element from the side channel, and causing, an animation rendering module of the second browser window, to animate the drag and drop operation in the second browser window based on the data about the draggable element retrieved from the side channel.