Web Application Drag and Drop via Communication Component

Resolve Bottlenecks,
Find Innovative Solutions
Generate Solutions

Solution Overview

Problem

Drag and drop operations are difficult to implement in web applications due to technical differences between web components and visualization components, limiting their functionality in graphical user interfaces.

Innovation Solution

A computer-readable medium with instructions that enable a drag and drop operation between web components and visualization components by using a communication component to transmit and receive data, allowing correct display of objects after being dragged and dropped, utilizing a JavaScript interface or similar for communication.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If drag and drop operations are implemented in web applications, then user interaction functionality is improved, but technical compatibility between web components and visualization components deteriorates

Engineering Contradiction:
Improvedrag and drop functionalityVSAvoidcomponent compatibility
Core Design Contradiction:
Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent introduces an intermediary layer that translates drag and drop operations between web components and visualization components. This mediator handles the technical differences between the two component types, allowing them to interact through standardized events and protocols without requiring direct compatibility between their native interfaces.

Inventive Principle:
Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent creates a universal drag and drop framework that works across different component types (web components, visualization components, and other third-party components). This framework provides multi-functional event handling that adapts to various component architectures, enabling a single drag and drop implementation to serve multiple component types without requiring separate implementations for each.

Inventive Principle:
Principle #6Universality (Multi-functionality)

2Ease of operation

If drag and drop operations are implemented between different component types, then operational capability is improved, but implementation difficulty increases

Engineering Contradiction:
Improvedrag and drop operationVSAvoidimplementation complexity
Core Design Contradiction:
Ease of operationVSDevice complexity

Solution Approach 1:

The patent segments the drag and drop implementation into distinct, manageable layers: event detection layer, translation layer, and execution layer. Each layer handles specific aspects of the operation independently, reducing implementation complexity by allowing developers to work with standardized interfaces at each level rather than dealing with the full complexity of cross-component compatibility.

Inventive Principle:
Principle #1Segmentation

Solution Approach 2:

The patent utilizes parameter changes in event objects to adapt drag and drop operations across different component types. By modifying event parameters and properties dynamically based on the source and target component types, the system maintains a unified implementation approach while accommodating the specific requirements of different components without increasing overall implementation difficulty.

Inventive Principle:
Principle #35Parameter changes

Data Source

PatentUS10048854B2Drag and drop interaction between components of a web application
Publication Date: 2018.08.14 ORACLE INT CORP
  • US10048854B2 patent drawing
  • US10048854B2 patent drawing
  • US10048854B2 patent drawing

AI summary

A user of a web application can perform a drag and drop operation from a first component of the web application to a second component of the web application. The drag and drop operation can include three actions. The first action can be initializing a drag of an object within a first component of a web application. The second action can be dragging the object from within the first component over a drop target located within a second component of the web application. The third action can be dropping the object onto the drop target located within the second component of the web application. One of the first and second components can be a web component, and the other component can be a visualization component. The first and second components of the web application can communicate with each other using a communication component of the web application.