Drag and drop interaction between components of a web application

• US 10,048,854 B2
• Filed: 01/31/2011
• Issued: 08/14/2018
• Est. Priority Date: 01/31/2011
• Status: Active Grant

• Current Assignee: Oracle International Corporation (Oracle Corporation)
• Original Assignee: Oracle International Corporation (Oracle Corporation)
• Inventors: Zhang, Hugh, Lee, Teck Hua, Chow, Kevin, Ahmed, Diar, Singh, Prashant
• Primary Examiner(s): Gaffin, Jeffrey A
• Assistant Examiner(s): Heffington, John M
• Application Number:
  US13/017,286
• Publication Number:
  US 20120198374A1
• Time in Patent Office: 2,752 Days
• Field of Search: 715769, 715739
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/0486 Drag-and-drop
• CPC Class Codes: G06F 9/4493 Object persistence
• CPC Class Codes: G06F 9/542 Event management; Broadcasting; Multicasting; Notifications

Abstract

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.

Claims

1. A non-transitory computer-readable medium having instructions stored thereon that, when executed by a processor, cause the processor to perform a drag and drop operation within a web application displayed in a graphical user interface of a web browser, the web application comprising two or more different components, the performing the drag and drop operation comprising:

initiating a drag of a source object displayed within a visualization component of the web application that is displayed within the graphical user interface of the web browser in response to a first event received by the web application, wherein the visualization component displays the source object as a visual icon that represents an underlying data payload;

creating and displaying a visual feedback object that comprises information used to display the source object in the web application;

dragging the visual feedback object from within the visualization component over a drop target located within a web component of the web application that is displayed within the graphical user interface of the web browser in response to one or more second events received by the web application, wherein the drop target is within a region that is displayed within the graphical user interface of the web browser, the source object remaining within the visualization component during the dragging of the visual feedback object, wherein the web component displays a plurality of textual records;

transferring the underlying payload data associated with, but separate from, the source object from the visualization component to the web component using a communication component of the web application when the visual feedback object is displayed within the web component; and

dropping the visual feedback object onto the drop target located within the web component of the web application displayed within the graphical user interface of the web browser in response to a third event received by the web application and,

the dropping including;

extracting and displaying the data payload from the source object within the web component, wherein the data payload is displayed as a new textual record of the plurality of textual records within the web component; and

deleting the source object and the visual feedback object from the graphical user interface.

2. The non-transitory computer-readable medium of claim 1, wherein the web component comprises a dynamic hypertext markup language component, and the visualization component comprises a multimedia component that comprises at least one of a Flash component, a Silverlight component, a Java applet component, a Scalable Vector Graphics component or a Synchronized Multimedia Integration Language component.

3. The non-transitory computer-readable medium of claim 2, wherein the communication component comprises a JavaScript interface.

4. The non-transitory computer-readable medium of claim 1,

wherein the creating the visual feedback object further comprises converting an image object of the visualization component into an encoded string and transferring the encoded string to the web component using the communication component of the web application.

5. The non-transitory computer-readable medium of claim 1, wherein the creating the visual feedback object further comprises converting an image object of the visualization component into a bitmap object and transferring the bitmap object to the web component using the communication component of the web application.

6. The non-transitory computer-readable medium of claim 1, wherein the dragging the visual feedback object further comprises:

continuously updating a position of the visual feedback object displayed in the web application in response to the one or more second events;

continuously determining whether the web application can accept a drop of the visual feedback object at the position of the visual feedback object in response to the one or more second events; and

displaying additional feedback in the web application that indicates whether the web application can accept a drop of the visual feedback object.

7. The non-transitory computer-readable medium of claim 1, wherein the dropping the visual feedback object further comprises:

determining whether the web application can accept a drop of the visual feedback object at a position of the visual feedback object;

when it is determined that the web application can accept the drop of the visual feedback object at the position and the visual feedback object is dropped at the position;

transferring the data payload from the visual feedback object to the drop target and displaying the target object at the drop target; and

when it is determined that the web application cannot accept the drop of the visual feedback object at the position and the visual feedback object is dropped at the position;

cancelling the drag and drop operation;

deleting the visual feedback object from the web application; and

maintaining the source object within the visualization component.

12. The non-transitory computer-readable medium of claim 1, wherein the target object has an appearance or format in the graphical user interface that is different than either the source object or the visual feedback object.

8. A computer-implemented method for performing a drag and drop operation within a web application displayed in a graphical user interface of a web browser, the web application comprising two or more different components, the computer-implemented method comprising:

initiating a drag of a source object displayed within a visualization component of the web application that is displayed within the graphical user interface of the web browser in response to a first event received by the web application, wherein the visualization component displays the source object as a visual icon that represents an underlying data payload;

creating and displaying a visual feedback object that comprises information used to display the source object in the web application;

dragging the visual feedback object from within the visualization component over a drop target located within a web component of the web application that is displayed within the graphical user interface of the web browser in response to one or more second events received by the web application, wherein the drop target is within a region that is displayed within the graphical user interface of the web browser, the source object remaining within the visualization component during the dragging of the visual feedback object, wherein the web component displays a plurality of textual records;

transferring the underlying payload data associated with, but separate from, the source object from the visualization component to the web component using a communication component of the web application when the visual feedback object is displayed within the web component;

dropping the visual feedback object onto the drop target located within the web component of the web application displayed within the graphical user interface of the web browser in response to a third event received by the web application and in response displaying a corresponding target object comprising a textual representation of the data payload,

the dropping including;

extracting and displaying the data payload from the source object within the web component, wherein the data payload is displayed as a new textual record of the plurality of textual records within the web component; and

deleting the source object and the visual feedback object from the graphical user interface.

9. The computer-implemented method of claim 8,

wherein the creating the visual feedback object further comprises converting an image object of the visualization component into an encoded string and transferring the encoded string to the web component using the communication component of the web application.

13. The method of claim 8, wherein the web component comprises a dynamic hypertext markup language component, and the visualization component comprises a multimedia component that comprises at least one of a Flash component, a Silverlight component, a Java applet component, a Scalable Vector Graphics component or a Synchronized Multimedia Integration Language component.

14. The method of claim 8, wherein the communication component comprises a JavaScript interface.

15. The method of claim 8, wherein the creating the visual feedback object further comprises converting an image object of the visualization component into a bitmap object and transferring the bitmap object to the web component using the communication component of the web application.

10. A system comprising:

a memory configured to store a collection of software modules; and

a processor configured to execute the collection of software modules stored on the memory;

wherein the processor is further configured, when executing the collection of software modules stored on the memory, to;

initiate a drag of a source object displayed within a visualization component of a web application that is displayed within a graphical user interface of a web browser in response to a first event received by the web application, wherein the visualization component displays the source object as a visual icon that represents an underlying data payload;

create and display a visual feedback object that comprises information used to display the source object in the web application;

drag the visual feedback object from within the visualization component over a drop target located within a web component of the web application that is displayed within the graphical user interface of the web browser in response to one or more second events received by the web application, wherein the drop target is within a region that is displayed within the graphical user interface of the web browser, the source object remaining within the visualization component during the dragging of the visual feedback object, wherein the web component displays a plurality of textual records;

transfer the underlying payload data associated with, but separate from, the source object from the visualization component to the web component using a communication component of the web application when the visual feedback object is displayed within the web component; and

drop the visual feedback object onto the drop target located within the web component of the web application displayed within the graphical user interface of the web browser in response to a third event received by the web application and in response displaying a corresponding target object comprising a textual representation of the data payload;

the drop including;

extracting and displaying the data payload from the source object within the web component, wherein the data payload is displayed as a new textual record of the plurality of textual records within the web component; and

deleting the source object and the visual feedback object from the graphical user interface.

11. The system of claim 10,

wherein the create the visual feedback object further comprises converting an image object of the visualization component into an encoded string and transferring the encoded string to the web component using the communication component of the web application.

16. The system of claim 10, wherein the web component comprises a dynamic hypertext markup language component, and the visualization component comprises a multimedia component that comprises at least one of a Flash component, a Silverlight component, a Java applet component, a Scalable Vector Graphics component or a Synchronized Multimedia Integration Language component.

17. The system of claim 10, wherein the communication component comprises a JavaScript interface.

18. The system of claim 10, wherein the create the visual feedback object further comprises converting an image object of the visualization component into a bitmap object and transferring the bitmap object to the web component using the communication component of the web application.