Cross-browser “drag-and-drop” library

Patent metadata

Field	Value
Publication number	US-9026931-B2
Application number	US-201113303134-A
Country	US
Kind code	B2
Filing date	Nov 22, 2011
Priority date	Nov 22, 2011
Publication date	May 5, 2015
Grant date	May 5, 2015

Abstract

Technologies are described herein for implementing a cross-browser drag-and-drop library. The drag-and-drop library creates a draggable object corresponding to a drag source element and a droppable object corresponding to a drop target element defined in a webpage. The draggable object and droppable object are each assigned a link key value. A user-defined data structure populated with data regarding the drag source element may also be assigned to the draggable object. A browser event indicating a drag-and-drop operation between the drag source and the drop target is intercepted, and the drag-and-drop library determines whether the link key value assigned to the corresponding draggable and droppable objects are the same. If the link key values are the same, the drag-and-drop library generates an event associated with the droppable object to facilitate an application-related operation associated with the drag-and-drop operation using the data in the user-defined data structure.

First claim

What is claimed is:

1. A computer-implemented method for providing drag-and-drop functionality in a user interface of a webpage, the method comprising:
receiving a first application programming interface (“API”) call to create a first object, the first API call specifying a drag source element in the webpage and a first link key value; the first link key value being a string value for grouping of the drag source element with at least one drop target element;
creating the first object from the drag source element;
assigning the first link key value to the first object;
receiving a second API call associated with the first object and specifying a user-defined data structure populated with data regarding the drag source element;
assigning the user-defined data structure to the first object;
receiving a third API call to create a second object, the third API call specifying a drop target element in the webpage and a second link key value;
creating the second object from the drop target element;
assigning the second link key value to the second object;
intercepting a browser event indicating that the drag source element was dropped onto the drop target element in the user interface;
upon intercepting the browser event, determining that the first link key value assigned to the first object and the second link key value assigned to the second object are the same; and
upon determining that the first link key value and the second link key value are the same, generating an event associated with the second object configured to facilitate an application-related operation associated with one or more of the drag source element and the drop target element using the data in the user-defined data structure.

2. The computer-implemented method of claim 1 , further comprising:
in response to generating the event associated with the second object, receiving a fourth API call to retrieve the user-defined data structure, the fourth API call associated with the first object; and
in response to receiving the fourth API call, returning the user-defined data structure assigned to the first object.

3. The computer-implemented method of claim 1 , wherein the second API call further specifies the first link key value, and wherein assigning the user-defined data structure to the first object further comprises associating the user-defined data structure with the first link key value.

4. The computer-implemented method of claim 3 , further comprising:
receiving a third link key value;
assigning the third link key value to the first object;
receiving a fifth API call associated with the first object and specifying a second user-defined data structure populated with data regarding the drag source element and the third link key value; and
assigning the second user-defined data structure to the first object and associated with the third link key value.

5. The computer-implemented method of claim 4 , further comprising:
receiving a sixth API call to retrieve a user-defined data structure assigned to the first object, the sixth API call associated with the first object and specifying the third link key value; and
in response to receiving the sixth API call, returning the second user-defined data data structure assigned to the first object and associated with the third link key value.

6. The computer-implemented method of claim 1 , further comprising:
intercepting a second browser event indicating that the drag source element was dropped onto a second drop target element in the user interface;
upon intercepting the second browser event, determining whether the first link key value assigned to the first object is the same as a link key value assigned to a third object corresponding to the second drop target; and
upon determining that the first link key value is not the same as a link key value assigned to the third object, ignoring the second browser event.

7. The computer-implemented method of claim 1 , wherein the first object and the second object are defined in a drag-and-drop library loaded by a browser client rendering the webpage, the drag-and-drop library further providing the first, second, and third APIs.

8. The computer-implemented method of claim 7 , wherein the first, second, and third API calls are made to the drag-and-drop library by script code contained in the webpage.

9. The computer-implemented method of claim 8 , wherein the drag-and-drop library is configured to provide a consistent set of APIs for the script code contained in the webpage across different browser platforms.

10. An optical disk, a magnetic storage device, or a solid state storage device comprising computer-executable instructions that, when executed by a computer, cause the computer to:
create a draggable object from a drag source element in a webpage;
assign a first link key value to the draggable object, the first link key value being a string value for grouping of the drag source element with at least one drop target element;
create a droppable object from a drop target element in the webpage;
assign a second link key value to the droppable object;
intercept a browser event indicating that the drag source element was dropped onto the drop target element through a user interface defined in the webpage;
upon intercepting the browser event, determining that the first link key value assigned to the draggable object and the second link key value assigned to the droppable object are the same;
upon determining that the first link key value and the second link key value are the same, generating an event associated with the droppable object configured to facilitate an application-related operation associated with one or more of the drag source element and the drop target element; and
upon determining that the first link key value and the second link key value are not the same, ignoring the browser event.

11. The optical disk, magnetic storage device, or solid state storage device of claim 10 , wherein the computer-executable instructions are contained within a drag-and-drop library loaded by a browser client rendering the webpage.

12. The optical disk, magnetic storage device, or solid state storage device of claim 11 , wherein a plurality of link key values are assigned to a plurality of draggable objects and droppable objects, each of the plurality of link key values corresponding to a group comprising drag sources and drop targets defined in the webpage between which drag-and-drop operations are enabled by the drag-and-drop library.

13. The optical disk, magnetic storage device, or solid state storage device of claim 10 , wherein a plurality of link key values are assigned to the draggable object.

14. The optical disk, magnetic storage device, or solid state storage device of claim 13 , wherein a different user-defined data structure populated with data regarding the drag source element is assigned to the draggable object and associated with each of the plurality of link key values.

15. The optical disk, magnetic storage device, or solid state storage device of claim 10 , comprising further computer-executable instructions that cause the computer to:
in response to generating the event associated with the droppable object, receive an application programming interface (“API”) call to retrieve a user-defined data structure populated with data regarding the drag source element, the API call associated with the draggable object and specifying the first key value; and
in response to receiving the API call, returning the user-defined data structure assigned to the draggable object and associated with the first key value.

Assignees

• Hackett Qinjia Liu
• David Mary Sugino
• Chen Zhenguang
• Thukral Harsimrat Singh
• Microsoft Technology Licensing Llc

Inventors

• Hackett Qinjia Liu
• David Mary Sugino
• Chen Zhenguang
• Thukral Harsimrat Singh

Classifications

• G06F16/972

  Access to data in other repository systems, e.g. legacy data or dynamic Web page generation · CPC title

• G06F16/958

  Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking · CPC title

• G06F16/95

  Retrieval from the web · CPC title

• G06F3/0486 Primary

  Drag-and-drop · CPC title

• G06F17/30861

  Physics · mapped topic