Drag and drop interaction between components of a web application

Patent metadata

Field	Value
Publication number	US-10048854-B2
Application number	US-201113017286-A
Country	US
Kind code	B2
Filing date	Jan 31, 2011
Priority date	Jan 31, 2011
Publication date	Aug 14, 2018
Grant date	Aug 14, 2018

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.

First claim

We claim:

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.

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.

10. A system comprising:
a memory configured to store a col

Assignees

• Zhang Hugh
• Lee Teck Hua
• Chow Kevin
• Ahmed Diar
• Singh Prashant
• Oracle Int Corp

Inventors

• Zhang Hugh
• Lee Teck Hua
• Chow Kevin
• Ahmed Diar
• Singh Prashant

Classifications

• G06F3/0486 Primary

  Drag-and-drop · CPC title

• G06F9/4493

  Object persistence · CPC title

• G06F3/04847

  Interaction techniques to control parameter settings, e.g. interaction with sliders or dials · CPC title

• G06F9/542

  Event management; Broadcasting; Multicasting; Notifications · CPC title