# US 9,436,445 B2 · Drag-and-drop functionality for scalable vector graphics

> Agents: this data is available as JSON from the patentgrep API and MCP server — see https://patentgrep.com/llms.txt

- Number: US 9,436,445 B2
- Document ID: US9436445B2
- Status: Granted
- Kind: B2
- Application number: 14/312,297
- Filed: 2014-06-23
- Published: 2015-12-24
- Granted: 2016-09-06
- Earliest claimed: 2014-06-23
- Assignees: VMware, Inc.
- Applicants: VMware, Inc.
- Inventors: Jialiang Wang; Komal Nitin Mangtani; Sesh Jalagam
- Web page: https://patentgrep.com/patent/US9436445B2

## CPC

- G06F 8/38: for implementing user interfaces
- G06F 9/542: {Event management; Broadcasting; Multicasting; Notifications}
- G06F 2209/545: Gui
- G06F: ELECTRIC DIGITAL DATA PROCESSING (computer systems based on specific computational models G06N)

## Abstract

A graphical user interface (GUI) engine receives an input event associated with a drag-and-drop action, determines a Scalable Vector Graphics (SVG) element that relates to the input event, and causes an anchor element to be attached to the SVG element, such as be wrapping the SVG element with the anchor element. Attaching an anchor element to an SVG element and defining the anchor element as “draggable” enables web browsers to perform drag-and-drop actions with SVG elements in a uniform and predictable manner. In one example use case, an SVG element may be wrapped with an anchor element when the SVG element is selected and dragged by a user, enabling an accurate representation of the SVG element to be displayed while the user is performing the drag-and-drop action.

## Claims

### Claim 1

A method of performing a drag-and-drop action with a scalar vector graphics (SVG) element, the method comprising:
receiving an input event associated with an SVG container element, wherein the SVG container element comprises the SVG element;
determining that the input event corresponds to the SVG element;
attaching an anchor element to the SVG element; and
using the anchor element to perform the drag-and-drop action.

### Claim 2 (depends on 1)

The method of claim 1, wherein using the anchor element to perform the drag-and-drop action comprises causing a representation of the SVG element to be displayed while performing at least a portion of the drag-and-drop action.

### Claim 3 (depends on 1)

The method of claim 1, further comprising receiving coordinates associated with the input event, and wherein determining that the input event corresponds to the SVG element is performed by determining that the coordinates correspond to the SVG element.

### Claim 4 (depends on 1)

The method of claim 1, wherein the SVG container element comprises a plurality of SVG elements, each SVG element associated with different coordinates.

### Claim 5 (depends on 1)

The method of claim 1, further comprising setting the anchor element as draggable.

### Claim 6 (depends on 1)

The method of claim 1, further comprising adding an event listener to the SVG container element, wherein the event listener receives the input event.

### Claim 7 (depends on 1)

The method of claim 1, further comprising adding an event listener to the anchor element and defining a behavior of at least one drag-and-drop event associated with the anchor element.

### Claim 8 (depends on 1)

The method of claim 1, wherein the anchor element comprises an SVG anchor element.

### Claim 9 (depends on 1)

The method of claim 1, wherein attaching the anchor element to the SVG element is performed by wrapping the SVG element with a JavaScript content pane.

### Claim 10

A non-transitory computer-readable storage medium comprising instructions that, when executed in a computing device, perform the steps of:
receiving an input event associated with an SVG container element, wherein the SVG container element comprises an SVG element;
determining that the input event corresponds to the SVG element;
attaching an anchor element to the SVG element; and
using the anchor element to perform a drag-and-drop action.

### Claim 11 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, further comprising instructions that, when executed in the computing device, perform the step of causing a representation of the SVG element to be displayed while performing at least a portion of the drag-and-drop action.

### Claim 12 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, further comprising instructions that, when executed in the computing device, perform the step of receiving coordinates associated with the input event, and wherein determining that the input event corresponds to the SVG element is performed by determining that the coordinates correspond to the SVG element.

### Claim 13 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, wherein the SVG container element comprises a plurality of SVG elements, each SVG element associated with different coordinates.

### Claim 14 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, further comprising instructions that, when executed in the computing device, perform the step of setting the anchor element as draggable.

### Claim 15 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, further comprising instructions that, when executed in the computing device, perform the step of adding an event listener to the SVG container element, wherein the event listener receives the input event.

### Claim 16 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, further comprising instructions that, when executed in the computing device, perform the step of adding an event listener to the anchor element and defining a behavior of at least one drag-and-drop event associated with the anchor element.

### Claim 17 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, wherein the anchor element comprises an SVG anchor element.

### Claim 18 (depends on 10)

The non-transitory computer-readable storage medium of claim 10, wherein attaching the anchor element to the SVG element is performed by wrapping the SVG element with a JavaScript content pane.

### Claim 19

A computer system, comprising a system memory and a processor programmed to carry out the steps of:
receiving an input event associated with an SVG container element, wherein the SVG container element comprises an SVG element;
determining that the input event corresponds to the SVG element;
attaching an anchor element to the SVG element; and
using the anchor element to perform a drag-and-drop action.

### Claim 20 (depends on 19)

The computer system of claim 19, wherein the system memory and the processor are further programmed to carry out the step of causing a representation of the SVG element to be displayed while performing at least a portion of the drag-and-drop action.