DRAG AND DROP INTERACTION BETWEEN COMPONENTS OF A WEB APPLICATION

• US 20120198374A1
• Filed: 01/31/2011
• Published: 08/02/2012
• 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, Ahmed, Diar, Singh, Prashant, Chow, Kevin
• Granted Patent: US 10,048,854 B2
• Time in Patent Office: Days
• US Class Current: 715/769
• 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 computer-readable medium having instructions stored thereon that, when executed by a processor, cause the processor to perform a drag and drop operation in a web application displayed in a graphical user interface of a web browser, the instructions comprising:

initiating a drag of an object displayed within a first component of the web application in response to a first event received by the web application;

dragging the object from within the first component over a drop target located within a second component of the web application in response to one or more second events received by the web application; and

dropping the object onto the drop target located within the second component of the web application in response to a third event received by the web application;

wherein one of the first and second components comprises a web component, and the other component comprises a visualization component; and

wherein the first and second components of the web application communicate with each other using a communication component of the web application.

2. The computer-readable medium of claim 1, wherein the web component comprises a dynamic hypertext markup language component, and the visualization component comprises an Adobe Flash®

component.

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

4. The computer-readable medium of claim 1,

wherein the first component comprises the visualization component and the second component comprises the web component;

wherein the initiating the drag of the object further comprises creating a data payload object that comprises a data payload of the object; and

creating and displaying a visual feedback object that comprises information used to display the object in the web application during the drag of the object.

5. The computer-readable medium of claim 4, 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 computer-readable medium of claim 4, wherein the dragging the 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 computer-readable medium of claim 4, wherein the dropping the object further comprises:

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

transferring the data payload from the data payload object to the drop target and displaying the object at the drop target when the web application can accept the drop of the visual feedback object at the drop target;

cancelling the drag operation when the web application can not accept a drop of the visual feedback object at the drop target; and

cancelling the displaying of the visual feedback object in the web application.

8. The computer-readable medium of claim 1,

wherein the first component comprises the web component and the second component comprises the visualization component;

and

wherein the initiating the drag of the object further comprises creating and displaying a visual feedback object that comprises information needed to display the object in the web application during the drag of the object.

9. The computer-readable medium of claim 8, wherein the dragging the 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 object.

10. The computer-readable medium of claim 8, wherein the continuously determining whether the web application can accept a drop of the object further comprises transferring a data payload of the object to the visualization component using the communication component of the web application.

11. The computer-readable medium of claim 8, wherein the dropping the object further comprises:

determining whether the web application can accept a drop of the object at the drop target;

transferring the data payload of the object to the drop target and creating a data payload object that comprises a data payload of the object when the web application can accept the drop of the object at the drop target;

cancelling the drag operation when the web application can not accept a drop of the object at the drop target; and

cancelling the display of the object in the web application using the visual feedback object.

12. The computer-readable medium of claim 11, wherein the transferring the data payload of the object to the drop target comprises transferring the data payload of the object to the drop target within the visualization component using the communication component of the web application.

13. The computer-readable medium of claim 1, wherein the first component and the second component each comprise a visualization component.

14. A computer-implemented method for performing a drag and drop operation in a web application displayed in a graphical user interface of a web browser, the computer-implemented method comprising:

initiating a drag of an object displayed within a first component of the web application in response to a first event received by the web application;

dragging the object from within the first component over a drop target located within a second component of the web application in response to one or more second events received by the web application; and

dropping the object onto the drop target located within the second component of the web application in response to a third event received by the web application;

wherein one of the first and second components comprises a web component, and the other component comprises a visualization component; and

wherein the first and second components of the web application communicate with each other using a communication component of the web application.

15. The computer-implemented method of claim 14,

wherein the first component comprises the visualization component and the second component comprises the web component;

wherein the initiating the drag of the object further comprises creating a data payload object that comprises a data payload of the object; and

creating and displaying a visual feedback object that comprises information used to display the object in the web application during the drag of the object.

16. The computer-implemented method of claim 14,

wherein the first component comprises the web component and the second component comprises the visualization component;

and

wherein the initiating the drag of the object further comprises creating and displaying a visual feedback object that comprises information needed to display the object in the web application during the drag of the object.

17. 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 an object displayed within a first component of a web application in response to a first event received by the web application;

drag the object from within the first component over a drop target located within a second component of the web application in response to one or more second events received by the web application; and

drop the object onto the drop target located within the second component of the web application in response to a third event received by the web application;

wherein one of the first and second components comprises a web component, and the other component comprises a visualization component; and

wherein the first and second components of the web application communicate with each other using a communication component of the web application.

18. The system of claim 17,

wherein the first component comprises the visualization component and the second component comprises the web component;

and

wherein the initiating the drag of the object further comprises creating a data payload object that comprises a data payload of the object and a visual feedback object that comprises information used to display the object in the web application during the drag of the object.

19. The system of claim 17,

wherein the first component comprises the web component and the second component comprises the visualization component;

and

wherein the initiating the drag of the object further comprises creating and displaying a visual feedback object that comprises information needed to display the object in the web application during the drag of the object.