DRAG-AND-DROP ACTIONS FOR WEB APPLICATIONS USING AN OVERLAY AND A SET OF PLACEHOLDER ELEMENTS
First Claim
1. A Web application stored in a non-transient storage medium able to be executed and interactively presented within a Web browser, said Web application upon being interactively presented within the Web browser comprising:
- a plurality of graphical objects comprising at least one source object and a set of at least one drop targets, wherein the source object is able to be dropped at any of the drop targets via a drag-and-drop action;
an overlay positioned on top of the graphical objects as determined by a z-order, wherein the overlay is non-visible, and wherein the overlay comprises an onmousemove event handler; and
a set of at least one placeholder elements, wherein each of the placeholder elements is positioned on the overlay or on top of the overlay as determined by the z-order, wherein each of the placeholder elements is non-visible and is positioned directly on top of a corresponding drop target and has a width approximately equal to a visible width of the corresponding drop target and a height approximately equal to a visible height of the corresponding drop target, wherein each of the at least one placeholder elements comprises an onmouseover event handler and an onmouseout event handler, wherein the onmouseover and onmouseout event handlers of the placeholder elements are utilized by the Web application to track which drop target, if any, a GUI pointer is positioned over.
1 Assignment
0 Petitions
Accused Products
Abstract
In order to improve performance and responsiveness for drag-and-drop actions for Web applications, the amount of JavaScript loaded and executed at each increment of the mouse as it moves during a drag-and-drop action should be minimized. This can be achieved by harnessing the efficient and native-code algorithms built into Web browsers. Instead of using a JavaScript algorithm to compute which drop target the mouse is on, an overlay with placeholders can be placed on top of the page using z-index, where the placeholders are placed directly on top of the drop targets. The current drop target can be computed using the browser'"'"'s built-in onmouseover and onmouseout events on the placeholder elements, thus freeing the browser from loading and executing too much JavaScript.
59 Citations
20 Claims
-
1. A Web application stored in a non-transient storage medium able to be executed and interactively presented within a Web browser, said Web application upon being interactively presented within the Web browser comprising:
-
a plurality of graphical objects comprising at least one source object and a set of at least one drop targets, wherein the source object is able to be dropped at any of the drop targets via a drag-and-drop action; an overlay positioned on top of the graphical objects as determined by a z-order, wherein the overlay is non-visible, and wherein the overlay comprises an onmousemove event handler; and a set of at least one placeholder elements, wherein each of the placeholder elements is positioned on the overlay or on top of the overlay as determined by the z-order, wherein each of the placeholder elements is non-visible and is positioned directly on top of a corresponding drop target and has a width approximately equal to a visible width of the corresponding drop target and a height approximately equal to a visible height of the corresponding drop target, wherein each of the at least one placeholder elements comprises an onmouseover event handler and an onmouseout event handler, wherein the onmouseover and onmouseout event handlers of the placeholder elements are utilized by the Web application to track which drop target, if any, a GUI pointer is positioned over. - View Dependent Claims (2, 3, 4, 5, 6, 7, 8)
-
-
9. A method comprising:
-
detecting an initiation of a drag-and-drop action presented within a graphical user interface of a Web application that is visually presented in a Web browser, wherein said graphical user interface comprises a plurality of graphical objects and a set of at least one drop targets; responsive to the initiation of the drag-and-drop action, activating a previously deactivated overlay and a set of at least one placeholder elements on the graphical user interface, wherein if activated, the overlay and set of placeholder elements are positioned in the z-order of the graphical user interface on top of each of the graphical objects, and wherein if deactivated, the overlay and set of placeholder elements are not positioned in the z-order of the graphical user interface on top of each of the graphical objects, wherein the overlay and the placeholder elements are non-visible if activated, wherein each of the placeholder elements is positioned directly on top of a corresponding drop target and has a width approximately equal to a visible width of the corresponding drop target and a height approximately equal to a visible height of the corresponding drop target; tracking movement of pointer in the graphical user interface with an event handler of the overlay; tracking which drop target, if any, a GUI pointer is positioned over using event handlers of the set of placeholder elements; and responsive to a completion of the drag-and-drop event, deactivating the overlay and the set of placeholder elements. - View Dependent Claims (10, 11, 12, 13, 14, 15)
-
-
16. A computer program product comprising a computer readable storage medium having computer usable program code embodied therewith, the computer usable program code comprising:
-
computer usable program code stored in the storage medium that upon being executed by a processor is operable to detect an initiation of a drag-and-drop action presented within a graphical user interface of a Web application that is visually presented in a Web browser, wherein said graphical user interface comprises a plurality of graphical objects and a set of at least one drop targets; computer usable program code stored in the storage medium that upon being executed by a processor is operable to, responsive to the initiation of the drag-and-drop action, activate a previously deactivated overlay and a set of at least one placeholder elements on the graphical user interface, wherein if activated, the overlay and set of placeholder elements are positioned in the z-order of the graphical user interface on top of each of the graphical objects, and wherein if deactivated, the overlay and set of placeholder elements are not positioned in the z-order of the graphical user interface on top of each of the graphical objects, wherein the overlay and the placeholder elements are non-visible if activated, wherein each of the placeholder elements is positioned directly on top of a corresponding drop target and has a width approximately equal to a visible width of the corresponding drop target and a height approximately equal to a visible height of the corresponding drop target; computer usable program code stored in the storage medium that upon being executed by a processor is operable to track movement of pointer in the graphical user interface with an event handler of the overlay; computer usable program code stored in the storage medium that upon being executed by a processor is operable to track which drop target, if any, a GUI pointer is positioned over using event handlers of the set of placeholder elements; and computer usable program code stored in the storage medium that upon being executed by a processor is operable to, responsive to a completion of the drag-and-drop event, deactivate the overlay and the set of placeholder elements. - View Dependent Claims (17, 18, 19, 20)
-
Specification