Stay organized with collections
Save and categorize content based on your preferences.
blockly > DragTarget
DragTarget class
Abstract class for a component with custom behaviour when a block or bubble is dragged over or dropped on top of it.
Signature:
export declare class DragTarget implements IDragTarget
Implements: IDragTarget
Constructors
| Constructor |
Modifiers |
Description |
| (constructor)() |
|
Constructor for DragTarget. It exists to add the id property and should not be called directly, only by a subclass. |
Properties
| Property |
Modifiers |
Type |
Description |
| id |
|
string |
The unique id for this component that is used to register with the ComponentManager. |
Methods
| Method |
Modifiers |
Description |
| getClientRect() |
|
Returns the bounding rectangle of the drag target area in pixel units relative to the Blockly injection div. |
| onDragEnter(_dragElement) |
|
Handles when a cursor with a block or bubble enters this drag target. |
| onDragExit(_dragElement) |
|
Handles when a cursor with a block or bubble exits this drag target. |
| onDragOver(_dragElement) |
|
Handles when a cursor with a block or bubble is dragged over this drag target. |
| onDrop(_dragElement) |
|
Handles when a block or bubble is dropped on this component. Should not handle delete here. |
| shouldPreventMove(_dragElement) |
|
Returns whether the provided block or bubble should not be moved after being dropped on this component. If true, the element will return to where it was when the drag started. |
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-09-18 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-09-18 UTC."],[[["\u003cp\u003eThe \u003ccode\u003eDragTarget\u003c/code\u003e class in Blockly defines how components react when blocks or bubbles are dragged over or dropped on them.\u003c/p\u003e\n"],["\u003cp\u003eIt's an abstract class with a unique ID, primarily used as a base for custom drag-and-drop interactions.\u003c/p\u003e\n"],["\u003cp\u003eKey methods include \u003ccode\u003eonDragEnter\u003c/code\u003e, \u003ccode\u003eonDragOver\u003c/code\u003e, \u003ccode\u003eonDragExit\u003c/code\u003e, \u003ccode\u003eonDrop\u003c/code\u003e for handling drag events and \u003ccode\u003eshouldPreventMove\u003c/code\u003e to control drop behavior.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers extend \u003ccode\u003eDragTarget\u003c/code\u003e to create custom drop zones in Blockly workspaces with specific functionalities.\u003c/p\u003e\n"]]],[],null,["[blockly](./blockly.md) \\\u003e [DragTarget](./blockly.dragtarget_class.md)\n\nDragTarget class\n----------------\n\nAbstract class for a component with custom behaviour when a block or bubble is dragged over or dropped on top of it.\n\n**Signature:** \n\n export declare class DragTarget implements IDragTarget \n\n**Implements:** [IDragTarget](./blockly.idragtarget_interface.md)\n\nConstructors\n------------\n\n| Constructor | Modifiers | Description |\n|------------------------------------------------------------------------------|-----------|---------------------------------------------------------------------------------------------------------------------|\n| [(constructor)()](./blockly.dragtarget_class._constructor__1_constructor.md) | | Constructor for DragTarget. It exists to add the id property and should not be called directly, only by a subclass. |\n\nProperties\n----------\n\n| Property | Modifiers | Type | Description |\n|-------------------------------------------------|-----------|--------|--------------------------------------------------------------------------------------|\n| [id](./blockly.dragtarget_class.id_property.md) | | string | The unique id for this component that is used to register with the ComponentManager. |\n\nMethods\n-------\n\n| Method | Modifiers | Description |\n|---------------------------------------------------------------------------------------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [getClientRect()](./blockly.dragtarget_class.getclientrect_1_method.md) | | Returns the bounding rectangle of the drag target area in pixel units relative to the Blockly injection div. |\n| [onDragEnter(_dragElement)](./blockly.dragtarget_class.ondragenter_1_method.md) | | Handles when a cursor with a block or bubble enters this drag target. |\n| [onDragExit(_dragElement)](./blockly.dragtarget_class.ondragexit_1_method.md) | | Handles when a cursor with a block or bubble exits this drag target. |\n| [onDragOver(_dragElement)](./blockly.dragtarget_class.ondragover_1_method.md) | | Handles when a cursor with a block or bubble is dragged over this drag target. |\n| [onDrop(_dragElement)](./blockly.dragtarget_class.ondrop_1_method.md) | | Handles when a block or bubble is dropped on this component. Should not handle delete here. |\n| [shouldPreventMove(_dragElement)](./blockly.dragtarget_class.shouldpreventmove_1_method.md) | | Returns whether the provided block or bubble should not be moved after being dropped on this component. If true, the element will return to where it was when the drag started. |"]]
